/* Comparateurs avant/après Éternelis (accueil). HTML produit par outils/avis_google.py,
   comportement dans /js/avant-apres-2026-11.js. Sans JavaScript : moitié avant, moitié après. */
.aa-section{--aa-encre:#183d30}
.aa-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 26px;margin-top:8px}
.aa-comparateur{margin:0}
/* Premier comparateur en vedette : toute la largeur de la grille, 960 px au plus */
.aa-grille>.aa-vedette{grid-column:1/-1;width:100%;max-width:960px;margin-inline:auto}
.aa-vedette figcaption{font-size:1.05rem;text-align:center}
.aa-cadre{--aa-pos:50%;position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:14px;background:#dcd8cc;box-shadow:0 6px 22px rgba(24,61,48,.14);cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.aa-cadre .aa-calque{position:absolute;inset:0;display:block;margin:0}
.aa-cadre img.aa-img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}
.aa-cadre .aa-avant{clip-path:inset(0 calc(100% - var(--aa-pos)) 0 0)}

/* Poignée verticale : trait + bouton rond (52 px, 60 px au doigt) */
.aa-poignee{position:absolute;top:0;bottom:0;left:var(--aa-pos);width:0;pointer-events:none;z-index:2}
.aa-poignee::before{content:"";position:absolute;top:0;bottom:0;left:-2px;width:4px;background:#fff;box-shadow:0 0 0 1px rgba(24,61,48,.22),0 0 12px rgba(0,0,0,.25)}
.aa-bouton{position:absolute;top:50%;left:0;width:52px;height:52px;margin:-26px 0 0 -26px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:50%;background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.28)}
.aa-bouton::before,.aa-bouton::after{content:"";width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent}
.aa-bouton::before{border-right:9px solid var(--aa-encre,#183d30)}
.aa-bouton::after{border-left:9px solid var(--aa-encre,#183d30)}
.aa-glisse .aa-bouton{transform:scale(1.06)}

/* Étiquettes */
.aa-etiquette{position:absolute;top:12px;z-index:1;padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.06em;line-height:1;text-transform:uppercase;pointer-events:none}
.aa-etiquette-avant{left:12px;background:rgba(24,61,48,.88);color:#fff}
.aa-etiquette-apres{right:12px;background:rgba(255,255,255,.94);color:#183d30}

/* Curseur natif : invisible, mais focalisable et piloté au clavier (flèches, Début, Fin) */
.aa-curseur{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;padding:0;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none;background:transparent}
.aa-curseur:focus-visible~.aa-poignee .aa-bouton{outline:3px solid #ac783b;outline-offset:3px}
.aa-cadre:not(.aa-actif) .aa-poignee,.aa-cadre:not(.aa-actif) .aa-curseur{display:none}

.aa-comparateur figcaption{margin-top:11px;font-size:.98rem;line-height:1.45;color:#3f4f47}
.aa-aide{font-size:.95rem}
.aa-mention{margin:18px 0 0;font-size:.82rem;color:#6b746e}
.aa-action{margin:22px 0 0}

@media (max-width:760px){
  .aa-grille{grid-template-columns:1fr;gap:24px}
  .aa-cadre{border-radius:10px}
  .aa-bouton{width:60px;height:60px;margin:-30px 0 0 -30px}
  .aa-etiquette{top:10px;font-size:.74rem;padding:6px 10px}
  .aa-etiquette-avant{left:10px}
  .aa-etiquette-apres{right:10px}
}
/* Téléphone : comparateur d’un bord à l’autre de l’écran (conteneur de l’accueil : 18 px de marge) */
@media (max-width:600px){
  .aa-section .aa-cadre{margin-inline:-18px;border-radius:0;box-shadow:none}
  .aa-section .aa-comparateur figcaption{margin-top:9px}
}
@media (forced-colors:active){.aa-poignee::before{background:CanvasText}.aa-bouton{border:2px solid CanvasText}}