/* =====================================================================
   ACCUEIL — feuille dediee
   =====================================================================

   Refonte du 21 oct. 2026, a la demande de l'utilisateur (« enleve les
   carres, refais tout l'accueil, beau et clean ») : plus aucun cadre ni
   motif de fond. Tout est pose a meme le fond uni #151515 ; l'ordre vient
   de l'espace, des colonnes et de fines lignes blanches verticales
   (--ac-ligne), le motif que l'utilisateur a choisi pour le comparatif.
   Le violet ne sert qu'aux rappels : bouton plein, mot d'accent, jauge
   de la video, fanion de la formule recommandee, coches.

   Chargee apres style.css et entierement portee sous #view-home : aucune
   regle d'ici n'atteint la boutique, le panneau ou les fenetres, qui
   partagent des noms generiques (.btn, .faq-item, .home-plan).

   Points d'accroche lus par app.js, a ne pas renommer :
     .hero              seuil de la barre d'achat
     .promo-timer       compte a rebours
     .home-plan[data-role] / .home-plan-logo   couronnes des formules
                        (leur habillage vient de style.css)
     .ac-up / .vu / .ac-anime / --ac-retard     apparition au defilement
                        (depuis le 21 oct. au soir : la seule fenetre video)
     #ac-film, #ac-film-video, .ac-film-chap.actif, --part   lecteur video
     #ac-etapes         ancre du bouton « Comment ça marche »
   Les data-t des chapitres viennent de outils/video-accueil/chapitres.json.

   Polices (choix du proprietaire, une voix par titre de section) :
   Ranchers pour le heros, les formules et l'appel final ; Rubik Spray
   Paint pour la video (site.css) ; IBM Plex Serif pour le comparatif ;
   PT Serif pour les questions ; Cantarell pour l'interface.

   Mouvement (skill emil-design-eng) : une seule courbe de sortie forte,
   des transitions courtes (150-250 ms) sur transform et opacity
   seulement, pression a 0.97 sur tout ce qui se clique, survols reserves
   aux pointeurs fins, et tout se coupe avec le reglage « Reduire les
   animations » ou prefers-reduced-motion.

   Plan :
     1. Jetons            6. Remise et heros    11. Appel final
     2. Fond et bandes    7. Video              12. Ecrans etroits
     3. Titres communs    8. Comparatif         13. (reserve)
     4. Boutons, liens    9. Formules           14. Mouvement reduit
     5. Apparitions      10. Questions
     6 bis. Recherche « Une question avant de vous lancer ? » (28 oct.)
   ===================================================================== */


/* ---------------------------------------------------------------- 1.
   Jetons

   Le fond uni #151515 (demande de l'utilisateur), des blancs translucides
   pour les filets et la ligne entre colonnes, et une seule couleur
   d'accent : le violet de la marque, en rappels.

   Contrastes sur --ac-fond : texte 17:1, second niveau 9,6:1, troisieme
   5,6:1 (au-dessus du seuil AA de 4,5:1).
--------------------------------------------------------------------- */

#view-home {
  --ac-fond:       #151515;
  --ac-surface:    rgba(255, 255, 255, 0.025);
  --ac-surface-2:  rgba(255, 255, 255, 0.045);
  --ac-filet:      rgba(255, 255, 255, 0.07);
  --ac-filet-fort: rgba(255, 255, 255, 0.13);
  /* Les lignes verticales entre colonnes (comparatif, video, formules). */
  --ac-ligne:      rgba(255, 255, 255, 0.3);

  --ac-texte:   #f5f3ff;
  --ac-texte-2: rgba(237, 233, 254, 0.74);
  --ac-texte-3: rgba(237, 233, 254, 0.56);

  --ac-violet:      #a78bfa;
  --ac-violet-fort: #8b5cf6;
  --ac-rose:        #e879f9;
  --ac-vert:        #4ade80;
  --ac-rouge:       #fb7185;
  --ac-degrade:     linear-gradient(135deg, #8b5cf6 0%, #a855f7 45%, #d946ef 100%);
  /* Bouton plein : s'arrete avant le rose clair pour garder le blanc
     lisible (4,6:1 au point le plus clair). */
  --ac-plein:       linear-gradient(180deg, #9b6bff 0%, #7c3aed 100%);

  --ac-r-s: 10px;
  --ac-r-m: 14px;
  --ac-r-l: 20px;
  --ac-r-xl: 28px;

  --ac-gouttiere: clamp(20px, 4.4vw, 40px);
  /* Tout en plus petit (21 oct. 2026, « je prefere quand c'est
     petit ») : sections plus proches, tailles reduites partout. */
  --ac-section:   clamp(52px, 6vw, 84px);

  /* Courbes du skill : sortie franche pour ce qui entre ou repond. */
  --ac-sortie: cubic-bezier(0.23, 1, 0.32, 1);
  --ac-milieu: cubic-bezier(0.77, 0, 0.175, 1);

  color: var(--ac-texte);
  background: var(--ac-fond);
}


/* ---------------------------------------------------------------- 2.
   Fond et bandes

   .views impose un couloir de 1180 px : l'accueil a des bandes qui
   touchent les bords, on le neutralise quand la vue est affichee (classe
   posee par showView) et on le retablit dans .ac-wrap.

   Plus de ciel etoile ni de grille (21 oct. 2026). Le logo 3D reste dans
   le heros (app.js le fait disparaitre au defilement).
--------------------------------------------------------------------- */

body.vue-accueil .views {
  max-width: none;
  padding: 0;
}

/* Le ciel etoile ne doit pas traverser l'accueil pendant son entree
   (signale par l'utilisateur le 20 oct. 2026 : « une micro seconde ou je
   vois la pluie d'etoiles » en revenant sur l'accueil). #view-home est
   opaque, mais il part d'une opacite nulle (animation vue-entree, site.css)
   et .views etait transparent ici : les etoiles passaient au travers. .views
   recoit le meme fond que l'accueil, le fondu se fait donc sur ce noir,
   comme sur les autres pages. Le pied de page, hors de .views, garde son
   ciel. */
body.vue-accueil .views { background: #151515; }


#view-home .ac-hero {
  max-width: none;
  margin: 0;
}

#view-home .ac-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--ac-gouttiere);
}

#view-home .ac-bande {
  position: relative;
  padding-block: var(--ac-section);
}

/* Aucun filet entre les bandes (21 oct., demande de l'utilisateur) :
   l'espace seul les separe, sur tout le site. */


/* ---------------------------------------------------------------- 3.
   Titres communs
--------------------------------------------------------------------- */

#view-home .ac-tete {
  max-width: 720px;
  margin: 0 0 clamp(26px, 3vw, 40px);
}

#view-home .ac-tete-centre {
  margin-inline: auto;
  text-align: center;
}

#view-home .ac-h2 {
  margin: 0;
  color: var(--ac-texte);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.08;
  text-wrap: balance;
}

#view-home .ac-tete-sub {
  margin: 12px auto 0;
  max-width: 500px;
  color: var(--ac-texte-2);
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: clamp(14.5px, 1.1vw, 15.5px);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Polices des titres de section, reprises de la version precedente : le
   titre de la video est en Rubik Spray Paint (regle de site.css). */
#view-home .ac-comparatif .ac-h2 {
  font-family: var(--police-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
}

#view-home .ac-tarifs .ac-h2 {
  font-family: var(--police-titre);
  font-weight: 400;
  letter-spacing: var(--titre-air, 0.02em);
}

#view-home .ac-faq .ac-h2 {
  font-family: "PT Serif", var(--police-serif);
  font-weight: 700;
  letter-spacing: -0.015em;
}


/* ---------------------------------------------------------------- 4.
   Boutons et liens

   Pression a 0.97 sur tout ce qui se clique (retour immediat), survol
   seulement avec un pointeur fin : sur telephone, le survol reste colle
   apres un appui.
--------------------------------------------------------------------- */

#view-home .ac-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Boutons dans le theme de la page (22 oct. 2026, « remets tous les
   boutons dans le theme et rends-les plus beaux ») : angles vifs comme les
   carres du comparatif, a plat, sans degrade ni lueur violette qui
   deborderait sur le fond.
     plein   : violet de la marque, fleche qui avance au survol ;
     contour : la ligne blanche des carres, texte blanc. */
#view-home .ac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 20px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1.2;
  /* Le texte passe a la ligne plutot que de sortir du bouton (police de
     repli plus large, texte agrandi dans les reglages, colonne etroite). */
  white-space: normal;
  text-align: center;
  text-wrap: balance;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 160ms var(--ac-sortie),
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

#view-home .ac-btn:active { transform: scale(0.98); }

#view-home .ac-btn:focus-visible {
  outline: 2px solid var(--ac-violet);
  outline-offset: 3px;
}

/* Blanc sur #7c3aed : 5,7:1 ; au survol #6d28d9, 7,1:1. */
#view-home .ac-btn-prim {
  color: #fff;
  background: #7c3aed;
  border-color: #7c3aed;
}

#view-home .ac-btn-ghost {
  color: var(--ac-texte);
  background: transparent;
  border-color: var(--ac-ligne);
}

/* Les icones : une fleche sur l'action, un chevron vers le bas sur
   « Comment ça marche », qui fait defiler la page. */
#view-home .ac-btn-prim::after,
#view-home .ac-btn-ghost[data-scroll]::after {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 200ms var(--ac-sortie);
}

#view-home .ac-btn-ghost[data-scroll]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

@media (hover: hover) and (pointer: fine) {
  #view-home .ac-btn-prim:hover { background: #6d28d9; border-color: #6d28d9; }
  #view-home .ac-btn-prim:hover::after { transform: translateX(3px); }
  #view-home .ac-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.6);
  }
  #view-home .ac-btn-ghost[data-scroll]:hover::after { transform: translateY(2px); }
}

#view-home .ac-btn-bloc {
  display: flex;
  width: 100%;
}

#view-home .ac-lien {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--ac-violet);
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(167, 139, 250, 0.35);
  text-underline-offset: 4px;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  #view-home .ac-lien:hover { color: #c4b5fd; text-decoration-color: currentColor; }
}

#view-home .ac-lien:focus-visible {
  outline: 2px solid var(--ac-violet);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ---------------------------------------------------------------- 5.
   Apparitions au defilement

   L'etat cache n'est pose que si app.js a ajoute .ac-anime : sans
   JavaScript ou avec les animations coupees, tout s'affiche d'emblee.
   Entree en sortie franche, 600 ms (animation d'explication, pas
   d'interface), decalage de 70 ms entre voisins (--ac-retard, pose par
   app.js). Pas de flou ici : sur des blocs aussi grands (la video, la
   table), il coutait trop cher a peindre.
--------------------------------------------------------------------- */

#view-home.ac-anime .ac-up {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms var(--ac-sortie),
    transform 600ms var(--ac-sortie);
  transition-delay: var(--ac-retard, 0s);
}

#view-home.ac-anime .ac-up.vu {
  opacity: 1;
  transform: none;
}


/* ---------------------------------------------------------------- 6.
   Remise et heros

   La remise est une simple ligne sous la barre du haut, sans bandeau. Le
   heros est une colonne centree, dans l'axe du logo 3D, sans halo ni
   grille derriere (« enleve les carres en fond »).
--------------------------------------------------------------------- */

#view-home .ac-promo {
  position: relative;
  z-index: 2;
}

#view-home .ac-promo-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 40px;
  padding-block: 10px 0;
  font-family: "PT Serif", var(--police-serif);
}

#view-home .ac-promo-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ac-violet-fort);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
}

#view-home .ac-promo-txt {
  margin: 0;
  color: var(--ac-texte-2);
  font-weight: 400;
  font-size: 13px;
}

#view-home .ac-promo-txt .promo-timer {
  color: var(--ac-texte);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#view-home .ac-promo-cta {
  padding: 5px 2px;
  border: 0;
  background: none;
  color: var(--ac-violet);
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: color 200ms ease, transform 160ms var(--ac-sortie);
}

#view-home .ac-promo-cta::after { content: " →"; }
#view-home .ac-promo-cta:active { transform: scale(0.97); }

#view-home .ac-promo-cta:focus-visible {
  outline: 2px solid var(--ac-violet);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (hover: hover) and (pointer: fine) {
  #view-home .ac-promo-cta:hover { color: #c4b5fd; }
}

#view-home .ac-hero {
  position: relative;
  padding: clamp(52px, 6vw, 88px) 0 clamp(52px, 6vw, 84px);
}

/* La presentation a gauche, le quartier de serveurs a droite (22 oct.
   2026). Le 28 oct. (« sur les cotes il y a trop d'espace vide ») : le
   heros sort du couloir de 1 200 px et prend jusqu'a 1 600 px. Le texte
   part donc plus a gauche ; le quartier monte au niveau du titre et se
   cale a droite ; juste dessous, decalee vers le texte, la recherche
   « Une question avant de vous lancer ? ». Les tailles ne changent pas
   (l'utilisateur prefere petit) : seule la place gagnee est occupee. */
#view-home .ac-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: clamp(40px, 4.5vw, 72px);
  row-gap: 0;
  max-width: 1600px;
  padding-inline: clamp(24px, 5vw, 96px);
}

#view-home .ac-hero-copy {
  grid-column: 1;
  grid-row: 1 / span 2;
  /* Un peu plus bas que le haut du quartier (qui monte au-dessus du
     titre) ; fixe, pour que le texte ne bouge pas quand des reponses
     s'ouvrent dans la recherche. */
  align-self: start;
  padding-top: clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

#view-home .ac-hero-copy :is(.ac-offre, .ac-actions, .ac-assure) { justify-content: flex-start; }

/* Le dessin occupe toute la colonne de droite (28 oct., « un gros espace
   au milieu ») : le grand ilot de serveurs (x 0..600 dans le SVG) garde sa
   taille (560 a 680 px de large) et reste cale a droite ; la place
   restante, jusqu'au texte, montre le petit ilot et la dalle (x < 0),
   coupes a gauche par « xMaxYMax slice » quand elle manque. La hauteur suit
   donc la largeur du grand ilot seul (430/600), lue sur la colonne (cqw). */
#view-home .ac-hero-visuel {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  container-type: inline-size;
  /* Monte : le haut de l'antenne depasse le titre. */
  margin-top: -40px;
  animation: ac-entree 900ms var(--ac-sortie) 260ms both;
}

#view-home .ac-hero-visuel svg {
  display: block;
  width: 100%;
  height: calc(min(100cqw, clamp(560px, 38vw, 680px)) * 430 / 600);
  /* Le bord gauche, coupe par le cadrage, s'efface au lieu de s'arreter
     net ; plus largement quand la colonne montre la partie gauche. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%);
          mask-image: linear-gradient(to right, transparent, #000 9%);
}

@container (min-width: 640px) {
  #view-home .ac-hero-visuel svg {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16%);
            mask-image: linear-gradient(to right, transparent, #000 16%);
  }
}

/* Le quartier vit doucement (reglage Decor « Anime ») : quelques fenetres
   s'eteignent puis se rallument, des voyants clignotent, l'antenne emet.
   Rien que de l'opacite, sur de petits elements. */
@keyframes ac-fenetre { 0%, 62% { opacity: 1; } 66%, 92% { opacity: 0.18; } 96%, 100% { opacity: 1; } }
@keyframes ac-voyant { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.2; } }
@keyframes ac-onde { 0% { opacity: 0; } 18% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes ac-feu { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

#view-home .ac-hero-visuel .f { animation: ac-fenetre var(--t, 9s) ease-in-out var(--d, 0s) infinite; }
#view-home .ac-hero-visuel .led { animation: ac-voyant var(--t, 1.4s) linear var(--d, 0s) infinite; }
#view-home .ac-hero-visuel .ant-feu { animation: ac-feu 2.4s ease-in-out infinite; }
#view-home .ac-hero-visuel .ant-ondes path { animation: ac-onde 2.4s ease-out infinite; }
#view-home .ac-hero-visuel .ant-ondes path:nth-child(2) { animation-delay: 0.3s; }
#view-home .ac-hero-visuel .ant-ondes path:nth-child(3) { animation-delay: 0.6s; }

html:is([data-decor="uni"], [data-animations="non"]) #view-home .ac-hero-visuel :is(.f, .led, .ant-feu, .ant-ondes path) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #view-home .ac-hero-visuel :is(.f, .led, .ant-feu, .ant-ondes path) { animation: none; }
}

/* Entree du heros au chargement : titre, texte, prix, boutons,
   reassurance, l'un apres l'autre (50 ms). Le heros est deja a l'ecran :
   pas d'IntersectionObserver ici. */
#view-home .ac-hero-copy > * {
  animation: ac-entree 700ms var(--ac-sortie) both;
}
#view-home .ac-hero-copy > :nth-child(1) { animation-delay: 40ms; }
#view-home .ac-hero-copy > :nth-child(2) { animation-delay: 90ms; }
#view-home .ac-hero-copy > :nth-child(3) { animation-delay: 140ms; }
#view-home .ac-hero-copy > :nth-child(4) { animation-delay: 190ms; }
#view-home .ac-hero-copy > :nth-child(5) { animation-delay: 240ms; }

@keyframes ac-entree {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

#view-home .ac-title {
  margin: 0;
  color: var(--ac-texte);
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(32px, 3.5vw, 50px);
  line-height: 1.02;
  letter-spacing: var(--titre-air, 0.02em);
  text-wrap: balance;
}

/* Le mot d'accent : le violet de la marque, plein (plus de degrade). */
#view-home .ac-title .grad {
  color: var(--ac-violet);
  font-family: var(--police-serif);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.02em;
}

#view-home .ac-lead {
  max-width: 520px;
  margin: 20px 0 0;
  color: var(--ac-texte-2);
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.65;
  text-wrap: pretty;
}

#view-home .ac-offre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 10px;
  margin: 26px 0 22px;
  font-family: var(--police-texte);
}

#view-home .ac-offre-de {
  color: var(--ac-texte-3);
  font-weight: 600;
  font-size: 13px;
}

#view-home .ac-offre-prix {
  color: var(--ac-texte);
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(30px, 2.8vw, 36px);
  line-height: 1;
  letter-spacing: var(--titre-air, 0.02em);
}

/* Prix barre, mois et pastille restent sur la meme ligne. */
#view-home .ac-offre-suite {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}

#view-home .ac-offre-avant {
  color: var(--ac-texte-3);
  font-weight: 400;
  font-size: 14.5px;
  text-decoration-color: currentColor;
}

#view-home .ac-offre-mois {
  color: var(--ac-texte-2);
  font-weight: 600;
  font-size: 13.5px;
}

#view-home .ac-offre-jour {
  align-self: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ac-violet-fort);
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
}

#view-home .ac-assure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ac-texte-3);
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: 12.5px;
}

#view-home .ac-assure li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Dans le heros, les trois garanties forment un triangle : deux en haut,
   la troisieme centree dessous (demande du 22 oct.). Les colonnes prennent
   la largeur de leur texte, le bloc reste donc cale a gauche du texte. */
#view-home .ac-hero-copy .ac-assure {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 10px 24px;
}

#view-home .ac-hero-copy .ac-assure li:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
}

#view-home .ac-assure li::before,
#view-home .ac-formule-liste li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: var(--ac-violet);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ---------------------------------------------------------------- 6 bis.
   Une question avant de vous lancer ?

   Sous le quartier de serveurs, decalee vers le texte (28 oct. 2026). Pas
   de boite : un titre court, un champ a angles vifs borde de la ligne
   blanche des colonnes (violet quand on y ecrit), trois exemples en
   etiquettes. Les reponses reprennent la forme des questions du bas de
   page (.ac-q / .ac-r), en plus petit, et poussent la suite de la page :
   rien ne passe par-dessus le comparatif. Moteur : app.js, « Recherche de
   l'accueil ».
--------------------------------------------------------------------- */

#view-home .ac-question {
  grid-column: 2;
  grid-row: 2;
  /* Toute la largeur du quartier, faubourg compris : memes bords. */
  width: 100%;
  margin-top: 22px;
  animation: ac-entree 900ms var(--ac-sortie) 340ms both;
}

#view-home .ac-question-titre {
  margin: 0;
  color: var(--ac-texte);
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: var(--titre-air, 0.02em);
}

#view-home .ac-question-sous {
  margin: 6px 0 14px;
  color: var(--ac-texte-3);
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.55;
  text-wrap: pretty;
}

#view-home .ac-question-champ {
  display: flex;
  align-items: center;
  height: 44px;
  border: 1px solid var(--ac-ligne);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

/* Le champ entier montre le focus : bordure violette doublee. */
#view-home .ac-question-champ:focus-within {
  border-color: var(--ac-violet);
  box-shadow: inset 0 0 0 1px var(--ac-violet);
  background: rgba(255, 255, 255, 0.035);
}

#view-home .ac-question-champ > svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0 10px 0 14px;
  color: var(--ac-texte-3);
}

#view-home .ac-question-champ input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 6px 0 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--ac-texte);
  font-family: var(--police-texte);
  font-size: 14.5px;
  -webkit-appearance: none;
          appearance: none;
}

/* Le cadre de focus des champs du site ferait un second rectangle dans
   le champ : c'est le champ entier qui le montre (ci-dessus). */
#view-home .ac-question-champ input:is(:focus, :focus-visible) {
  outline: 0;
  border: 0;
  box-shadow: none;
  background: none;
}

#view-home .ac-question-champ input::placeholder { color: var(--ac-texte-3); opacity: 1; }
#view-home .ac-question-champ input::-webkit-search-cancel-button { display: none; }

#view-home .ac-question-effacer {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ac-texte-3);
  cursor: pointer;
  transition: color 200ms ease, transform 160ms var(--ac-sortie);
}

#view-home .ac-question-effacer[hidden] { display: none; }
#view-home .ac-question-effacer svg { width: 15px; height: 15px; }
#view-home .ac-question-effacer:active { transform: scale(0.97); }
#view-home .ac-question-effacer:focus-visible { outline: 2px solid var(--ac-violet); outline-offset: -4px; }

@media (hover: hover) and (pointer: fine) {
  #view-home .ac-question-effacer:hover { color: var(--ac-texte); }
}

#view-home .ac-question-idees {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

#view-home .ac-question-idees[hidden] { display: none; }

#view-home .ac-question-essayez {
  color: var(--ac-texte-3);
  font-family: var(--police-texte);
  font-size: 12.5px;
}

#view-home .ac-idee {
  padding: 5px 10px;
  border: 1px solid var(--ac-filet-fort);
  background: none;
  color: var(--ac-texte-2);
  font-family: var(--police-texte);
  font-size: 12.5px;
  line-height: 1.3;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, transform 160ms var(--ac-sortie);
}

#view-home .ac-idee:active { transform: scale(0.97); }
#view-home .ac-idee:focus-visible { outline: 2px solid var(--ac-violet); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  #view-home .ac-idee:hover { border-color: var(--ac-ligne); color: var(--ac-texte); }
}

#view-home .ac-question-res:empty { display: none; }
#view-home .ac-question-res { margin-top: 12px; }

#view-home .ac-question-compte,
#view-home .ac-question-rien {
  margin: 0;
  color: var(--ac-texte-3);
  font-family: var(--police-texte);
  font-size: 12.5px;
  line-height: 1.5;
}

#view-home .ac-question-rien { color: var(--ac-texte-2); font-size: 13.5px; }

#view-home .ac-question-r summary {
  padding: 12px 34px 12px 0;
  font-size: 14.5px;
}

#view-home .ac-question-r .ac-r { padding: 0 34px 14px 0; }
#view-home .ac-question-r .ac-r p { font-size: 13.5px; line-height: 1.65; }
#view-home .ac-question-r .ac-r p + p { margin-top: 8px; }

/* Les reponses arrivent du meme mouvement que celles du bas de page. */
#view-home .ac-question-res > * { animation: ac-reponse 220ms var(--ac-sortie); }

#view-home .ac-question-formules {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ac-texte-2);
  font-family: "PT Serif", var(--police-serif);
  font-size: 13.5px;
  line-height: 1.8;
}

#view-home .ac-question-formules b { color: var(--ac-texte); font-weight: 700; }
#view-home .ac-question-voir { margin-top: 8px; padding-left: 0; }

#view-home .ac-question-autre {
  margin: 12px 0 0;
  color: var(--ac-texte-3);
  font-family: var(--police-texte);
  font-size: 13px;
}

#view-home .ac-question-autre[hidden] { display: none; }
#view-home .ac-question-autre .ac-lien { font-size: 13px; }


/* ---------------------------------------------------------------- 7.
   Video du logiciel

   La video du logiciel, grande et centree, puis les chapitres en barre
   juste dessous, separes par la ligne blanche. Chaque chapitre porte une
   piste en haut ; celle du chapitre en cours se remplit en violet
   (--part, ecrit par app.js a chaque image).
--------------------------------------------------------------------- */

/* Le titre de la video garde Rubik Spray Paint (site.css). */
#view-home .ac-film .ac-h2 { font-size: clamp(24px, 2.6vw, 32px); }

#view-home .ac-film-os {
  margin: 10px 0 0;
  color: var(--ac-texte-3);
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

/* La video seule, coins arrondis et ombre douce : ni bordure ni barre de
   fenetre (« sans aucun cadre »). */
#view-home .ac-film-ecran {
  max-width: 820px;
  margin: 0 auto;
  border-radius: 12px;
  background: #1b1b1b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 40px 90px -40px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  isolation: isolate;
}

#view-home .ac-film-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #1b1b1b;
}

#view-home .ac-film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#view-home .ac-film-chapitres {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 820px;
  margin: 18px auto 0;
  padding: 0;
  list-style: none;
}

#view-home .ac-film-chapitres li { display: flex; }
#view-home .ac-film-chapitres li + li { border-left: 1px solid var(--ac-ligne); }

#view-home .ac-film-chap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 16px 16px 4px;
  border: 0;
  background: none;
  color: var(--ac-texte-3);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ac-sortie);
}

#view-home .ac-film-chap:active { transform: scale(0.98); }
#view-home .ac-film-chap:focus-visible { outline: 2px solid var(--ac-violet); outline-offset: -2px; border-radius: 6px; }

/* La piste : un trait en haut de chaque chapitre, rempli par --part
   (mise a l'echelle plutot que largeur : rien a recalculer). */
#view-home .ac-film-chap-jauge {
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

#view-home .ac-film-chap-jauge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ac-violet-fort);
  transform: scaleX(var(--part, 0));
  transform-origin: left;
}

#view-home .ac-film-chap b {
  color: var(--ac-texte-2);
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.3;
  transition: color 200ms ease;
}

#view-home .ac-film-chap-txt {
  color: var(--ac-texte-3);
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
}

#view-home .ac-film-chap.actif b { color: var(--ac-texte); }

@media (hover: hover) and (pointer: fine) {
  #view-home .ac-film-chap:hover b { color: var(--ac-texte); }
}


/* ---------------------------------------------------------------- 8.
   Comparatif

   Un petit rectangle coupe en trois carres cote a cote (demande du
   22 oct. 2026) : le critere, a la main, avec Brixall. Cadre et
   separations dans la meme ligne blanche (--ac-ligne), angles vifs, rien
   d'autre a l'interieur : on doit voir trois carres. Le rectangle fait
   trois fois sa hauteur (aspect-ratio 3 / 1) et les six lignes se
   partagent la hauteur ; sous 950 px il n'y a plus la place pour des
   carres, la hauteur suit alors le texte, toujours en trois colonnes.
--------------------------------------------------------------------- */

#view-home .ac-comp {
  width: min(100%, 870px);
  aspect-ratio: 3 / 1;
  margin: 0 auto;
  border: 1px solid var(--ac-ligne);
}

#view-home .ac-comp-table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}

#view-home .ac-comp-table th,
#view-home .ac-comp-table td {
  padding: 0 16px;
  border: 0;
  text-align: left;
  vertical-align: middle;
}

/* Les deux separations verticales. */
#view-home .ac-comp-table .ac-comp-sans,
#view-home .ac-comp-table .ac-comp-avec { border-left: 1px solid var(--ac-ligne); }

#view-home .ac-comp-table thead th {
  height: 46px;
  padding-top: 6px;
  font-family: var(--police-serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

#view-home .ac-comp-table thead th > * { vertical-align: middle; }
/* Le coin de gauche porte le titre de la colonne des criteres : plus de
   carre vide en haut a gauche. */
#view-home .ac-comp-table thead .ac-comp-coin { color: var(--ac-texte-2); }
#view-home .ac-comp-table thead .ac-comp-sans { color: var(--ac-texte-3); }
#view-home .ac-comp-table thead .ac-comp-avec { color: var(--ac-texte); }

#view-home .ac-comp-tete-ico,
#view-home .ac-comp-marque {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

#view-home .ac-comp-tete-ico svg { display: block; width: 100%; height: 100%; }
#view-home .ac-comp-marque { border-radius: 5px; }

/* Le critere, colonne de gauche. */
#view-home .ac-comp-table tbody th {
  color: var(--ac-texte-2);
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
}

/* Les phrases : l'icone dans la marge gauche, le texte aligne sur
   lui-meme quand il passe a la ligne. */
#view-home .ac-comp-table tbody td {
  position: relative;
  padding-left: 36px;
  font-family: var(--police-serif);
  font-size: 12.5px;
  line-height: 1.28;
}

#view-home .ac-comp-table tbody td > span { text-wrap: pretty; }

#view-home .ac-comp-table tbody td > svg {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
}

#view-home .ac-comp-table tbody td.ac-comp-sans { color: var(--ac-texte-3); }
#view-home .ac-comp-table tbody td.ac-comp-sans > svg { color: rgba(251, 113, 133, 0.65); }
#view-home .ac-comp-table tbody td.ac-comp-avec { color: var(--ac-texte); font-weight: 500; }
#view-home .ac-comp-table tbody td.ac-comp-avec > svg { color: var(--ac-vert); }

/* Six lignes de meme hauteur : 46 px d'en-tete + 6 x 40 px tiennent
   dans le carre de 290 px, le reste se repartit a peine. */
#view-home .ac-comp-table tbody tr { height: 40px; }

/* Sous 950 px (870 px de rectangle + marges) : plus la place pour des
   carres, la hauteur suit le texte. */
@media (max-width: 949px) {
  #view-home .ac-comp { aspect-ratio: auto; }
  #view-home .ac-comp-table { height: auto; }
  #view-home .ac-comp-table tbody tr { height: auto; }
  #view-home .ac-comp-table tbody th,
  #view-home .ac-comp-table tbody td { padding-top: 9px; padding-bottom: 9px; }
}

/* Sans brusquer vos comptes (28 oct. 2026) : quatre garde-fous du
   logiciel a la place du bouton et du prix, qui repetaient le heros. Sous
   le tableau, a sa largeur : quatre colonnes separees par la ligne
   blanche, un chiffre puis ce qu'il veut dire. Sur grand ecran (11 bis),
   une liste a cote du tableau, sous le titre. */
#view-home .ac-comp-surete {
  width: min(100%, 870px);
  margin: 34px auto 0;
}

#view-home .ac-comp-surete-titre {
  margin: 0 0 14px;
  color: var(--ac-violet);
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

#view-home .ac-comp-surete-liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

#view-home .ac-comp-surete-liste li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 18px;
}

#view-home .ac-comp-surete-liste li + li { border-left: 1px solid var(--ac-ligne); }

#view-home .ac-comp-surete-liste b {
  color: var(--ac-texte);
  font-family: var(--police-chiffres);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#view-home .ac-comp-surete-liste span {
  color: var(--ac-texte-2);
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Deux par rangee sur ecran etroit ; la ligne ne separe que les deux
   d'une rangee. */
@media (max-width: 720px) {
  #view-home .ac-comp-surete-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  #view-home .ac-comp-surete-liste li + li { border-left: 0; }
  #view-home .ac-comp-surete-liste li:nth-child(2n) { border-left: 1px solid var(--ac-ligne); }
  #view-home .ac-comp-surete-liste li { padding: 2px 12px; }
}


/* ---------------------------------------------------------------- 9.
   Formules

   Trois colonnes sans cadre, separees par la ligne blanche. style.css
   habille .home-plan en carte (bord, fond flou, survol qui souleve) : on
   l'efface ici. La recommandee se signale par son fanion violet et son
   bouton plein ; les couronnes et pastilles viennent de style.css.
--------------------------------------------------------------------- */

/* Les trois colonnes partagent leurs rangees (sous-grille) : noms, prix,
   listes et boutons restent alignes d'une formule a l'autre, meme quand
   le fanion de Pro passe a la ligne.
   Elargies le 23 oct. 2026 (« on dirait du 4:3 ») : 1120 px au lieu de
   860, les listes et le bouton de Pro ne passent plus a la ligne et le
   bloc devient plus large que haut. */
#view-home .ac-formules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  max-width: 1120px;
  margin: 0 auto;
}

#view-home .ac-formule,
#view-home .ac-formule.featured {
  position: relative;
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  margin: 0;
  padding: 4px clamp(18px, 3vw, 44px) 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: none;
  transform: none;
  transition: none;
}

#view-home .ac-formule + .ac-formule { border-left: 1px solid var(--ac-ligne); }

@media (hover: hover) and (pointer: fine) {
  #view-home .ac-formule:hover {
    border-color: var(--ac-ligne);
    box-shadow: none;
    transform: none;
  }
}

/* Le fanion suit le nom de Pro, sur sa ligne. */
#view-home .ac-formule-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

#view-home .ac-formule-fanion {
  padding: 3px 9px;
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.16);
  color: #c4b5fd;
  font-family: var(--police-texte);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Le logo de style.css (58 px) un peu plus petit. */
#view-home .ac-formule-logo { margin-bottom: 14px; zoom: 0.8; }

#view-home .ac-formule-nom {
  margin: 0;
  color: var(--ac-texte);
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: var(--titre-air, 0.02em);
}

#view-home .ac-formule-pour {
  min-height: 2.9em;
  margin: 6px 0 0;
  color: var(--ac-texte-3);
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.45;
}

#view-home .ac-formule-prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 18px 0 0;
  font-family: var(--police-texte);
}

#view-home .ac-formule-prix s {
  flex-basis: 100%;
  color: var(--ac-texte-3);
  font-weight: 400;
  font-size: 12.5px;
  text-decoration-color: currentColor;
}

#view-home .ac-formule-prix b {
  color: var(--ac-texte);
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  letter-spacing: var(--titre-air, 0.02em);
}

#view-home .ac-formule-prix span {
  color: var(--ac-texte-3);
  font-weight: 600;
  font-size: 13px;
}

#view-home .ac-formule-liste {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
}

#view-home .ac-formule-liste li {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 0;
  color: var(--ac-texte-2);
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.45;
}

/* style.css dessine sa propre coche en bordures sur .home-plan li : on
   l'efface pour ne garder que l'icone masquee (section 6). */
#view-home .ac-formule-liste li::before {
  position: static;
  margin-top: 2px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  rotate: none;
}

#view-home .ac-formule-liste .ac-perk-prio,
#view-home .ac-formule-liste .ac-perk-dedie {
  color: var(--ac-texte);
  font-weight: 600;
}


#view-home .ac-formule .ac-btn { align-self: end; }

#view-home .ac-formules-note {
  margin: 34px 0 0;
  text-align: center;
}


/* ---------------------------------------------------------------- 10.
   Questions

   Une liste sobre, filets entre les questions seulement (pas de cadre).
   Le signe « + » tourne d'un quart de tour a l'ouverture.
--------------------------------------------------------------------- */

#view-home .ac-faq-in { max-width: 680px; }

#view-home .ac-faq-liste {
  border-top: 1px solid var(--ac-filet);
}

#view-home .ac-q {
  border-bottom: 1px solid var(--ac-filet);
}

#view-home .ac-q summary {
  position: relative;
  display: block;
  padding: 18px 44px 18px 0;
  color: var(--ac-texte);
  font-family: "PT Serif", var(--police-serif);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease;
}

#view-home .ac-q summary::-webkit-details-marker { display: none; }

#view-home .ac-q summary::before,
#view-home .ac-q summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ac-texte-2);
  transition: transform 200ms var(--ac-sortie), background-color 200ms ease;
}

#view-home .ac-q summary::after { transform: rotate(90deg); }
#view-home .ac-q[open] summary::after { transform: rotate(0deg); }
#view-home .ac-q[open] summary::before,
#view-home .ac-q[open] summary::after { background: var(--ac-violet); }

#view-home .ac-q summary:focus-visible {
  outline: 2px solid var(--ac-violet);
  outline-offset: 4px;
  border-radius: 6px;
}

@media (hover: hover) and (pointer: fine) {
  #view-home .ac-q summary:hover { color: #ddd6fe; }
}

#view-home .ac-r {
  padding: 0 44px 20px 0;
}

#view-home .ac-q[open] .ac-r {
  animation: ac-reponse 260ms var(--ac-sortie);
}

@keyframes ac-reponse {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

#view-home .ac-r p {
  margin: 0;
  color: var(--ac-texte-2);
  font-family: "PT Serif", var(--police-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
}

#view-home .ac-faq-plus {
  margin: 28px 0 0;
  text-align: center;
}


/* ---------------------------------------------------------------- 11.
   Appel final

   Le meme gabarit que le comparatif (demande du 22 oct. 2026 : « de
   droite a gauche, pas de haut en bas ») : un rectangle de 870 x 290 px
   coupe en trois carres par la ligne blanche. La promesse, ce qu'on y
   gagne, les boutons. Sous 950 px, plus la place pour des carres : la
   hauteur suit le texte ; sous 720 px, les trois cases s'empilent.
--------------------------------------------------------------------- */

#view-home .ac-final {
  padding-bottom: clamp(72px, 8vw, 120px);
}

#view-home .ac-final-cadre {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 870px);
  aspect-ratio: 3 / 1;
  margin: 0 auto;
  border: 1px solid var(--ac-ligne);
}

#view-home .ac-final-case {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 26px 26px;
}

#view-home .ac-final-case + .ac-final-case { border-left: 1px solid var(--ac-ligne); }

#view-home .ac-final-marque {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 0 18px;
  border-radius: 8px;
}

/* Alfa Slab One, choisie par l'utilisateur le 22 oct. 2026 (une seule
   graisse : pas de gras synthetique). Large : 26 px tiennent en quatre
   lignes dans le carre. */
#view-home .ac-final-titre {
  margin: 0;
  color: var(--ac-texte);
  font-family: "Alfa Slab One", var(--police-titre);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(22px, 2.1vw, 26px);
  line-height: 1.15;
  letter-spacing: 0;
  text-wrap: balance;
}

#view-home .ac-final-sous {
  margin: 0;
  color: var(--ac-texte);
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Les trois garanties du heros, en liste sous la promesse. */
#view-home .ac-assure.ac-final-assure {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0 0;
}

#view-home .ac-final-action { gap: 10px; }
#view-home .ac-final-action .ac-btn { width: 100%; padding-inline: 14px; }

#view-home .ac-final-prix {
  margin-top: 4px;
  color: var(--ac-texte-3);
  font-family: var(--police-serif);
  font-size: 12.5px;
  text-align: center;
}

@media (max-width: 949px) {
  #view-home .ac-final-cadre { aspect-ratio: auto; }
  #view-home .ac-final-case { padding: 24px 20px; }
}

/* Trois cases cote a cote jusqu'a 600 px, comme sur grand ecran (28 oct.
   2026) ; empilees sur telephone. */
@media (max-width: 600px) {
  #view-home .ac-final-cadre { grid-template-columns: minmax(0, 1fr); }
  #view-home .ac-final-case + .ac-final-case { border-left: 0; border-top: 1px solid var(--ac-ligne); }
  #view-home .ac-assure.ac-final-assure { align-items: flex-start; }
}


/* ---------------------------------------------------------------- 11 bis.
   Grands ecrans : plus de vide sur les cotes (28 oct. 2026)

   « Il faut combler aussi le bas de la page, il y a les trous sur les
   cotes ». Au-dela de 1 180 px, les sections prennent la largeur du heros
   (1 600 px au plus, memes marges) ; les formules et l'appel final
   s'etirent sur toute la largeur. Au-dela de 1 360 px, le comparatif, la
   video et les questions reprennent la construction du heros : le titre a
   gauche, le contenu a droite. Pas avant : le tableau du comparatif doit
   garder ses trois carres (864 px de large au moins, ses six lignes
   faisant 288 px). Les tailles de texte ne changent pas ; en dessous de
   1 180 px, rien ne change.
--------------------------------------------------------------------- */

@media (min-width: 1180px) {
  #view-home .ac-bande .ac-wrap {
    max-width: 1600px;
    padding-inline: clamp(24px, 5vw, 96px);
  }

  /* Formules et appel final : toute la largeur. */
  #view-home .ac-formules { max-width: none; }
  #view-home .ac-final-cadre { width: 100%; aspect-ratio: auto; min-height: 280px; }
}

@media (min-width: 1360px) {
  /* Titre a gauche, aligne comme le texte du heros ; contenu a droite. */
  #view-home :is(.ac-comparatif, .ac-film, .ac-faq) .ac-wrap {
    display: grid;
    grid-template-columns: minmax(0, clamp(280px, 21vw, 360px)) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(48px, 5vw, 96px);
    align-items: start;
  }
  #view-home :is(.ac-comparatif, .ac-film, .ac-faq) .ac-tete {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    text-align: left;
  }
  #view-home :is(.ac-comparatif, .ac-film, .ac-faq) :is(.ac-tete-sub, .ac-film-os) { margin-left: 0; text-align: left; }

  /* Comparatif : le tableau a droite (toujours trois carres) ; sous le
     titre, les garde-fous en liste, le chiffre devant sa legende, une
     ligne chacun. La colonne fait la hauteur du tableau, ni plus ni moins
     (29 oct.) : les quatre rangees se partagent ce qui reste sous le
     titre et la derniere ligne tombe sur le bas du tableau. */
  #view-home .ac-comp { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; }
  #view-home .ac-comp-surete { grid-column: 1; grid-row: 2; align-self: stretch; display: flex; flex-direction: column; width: auto; margin: 16px 0 0; }
  #view-home .ac-comp-surete-titre { margin-bottom: 4px; text-align: left; }
  #view-home .ac-comp-surete-liste { flex: 1 1 auto; display: flex; flex-direction: column; }
  #view-home .ac-comp-surete-liste li {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 12px;
    align-items: baseline;
    align-content: center;
    padding: 5px 0;
  }
  #view-home .ac-comp-surete-liste li + li { border-left: 0; border-top: 1px solid var(--ac-filet); }
  #view-home .ac-comp-surete-liste li:last-child { border-bottom: 1px solid var(--ac-filet); }
  #view-home .ac-comp-surete-liste b { font-size: 15px; }
  #view-home .ac-comp-surete-liste span { line-height: 1.4; }

  /* Video : la fenetre a droite ; les chapitres en liste sous le titre,
     la jauge passe a gauche de chaque chapitre et se remplit vers le bas. */
  #view-home .ac-film-ecran { grid-column: 2; grid-row: 1 / span 2; width: 100%; max-width: none; margin: 0; }
  #view-home .ac-film-chapitres { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); max-width: none; margin: 26px 0 0; }
  #view-home .ac-film-chapitres li + li { border-left: 0; border-top: 1px solid var(--ac-filet); }
  #view-home .ac-film-chap { padding: 12px 0 12px 18px; }
  #view-home .ac-film-chap-jauge { top: 12px; bottom: 12px; left: 0; right: auto; width: 2px; height: auto; }
  #view-home .ac-film-chap-jauge::after { transform: scaleY(var(--part, 0)); transform-origin: top; }

  /* Questions : la liste a droite, « Une autre question ? » sous le titre. */
  #view-home .ac-faq-liste { grid-column: 2; grid-row: 1 / span 2; }
  #view-home .ac-faq-plus { grid-column: 1; grid-row: 2; margin: 18px 0 0; text-align: left; }
}


/* ---------------------------------------------------------------- 12.
   Ecrans etroits
--------------------------------------------------------------------- */

@media (max-width: 980px) {
  /* Heros : la meme page que sur grand ecran, en plus serre (28 oct. 2026 :
     une fenetre retrecie, l'inspecteur ouvert a cote, basculait en version
     telephone et l'utilisateur veut « la page comme elle est »). Le texte
     garde un peu plus de place que le quartier et la recherche ; seuls les
     telephones (600 px et moins) empilent tout. */
  #view-home .ac-hero-in {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(22px, 4vw, 40px);
    padding-inline: var(--ac-gouttiere);
  }
  #view-home .ac-hero-visuel { max-width: none; margin-top: -24px; }
  #view-home .ac-question { max-width: none; margin-top: 18px; }
  /* Colonne plus etroite : les deux boutons remplissent leur ligne (cote a
     cote s'ils tiennent, l'un sous l'autre a la meme largeur sinon), et les
     garanties s'enchainent sans couper « Resiliable a tout moment ». */
  #view-home .ac-actions .ac-btn { flex: 1 1 auto; }
  #view-home .ac-hero-copy .ac-assure { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
  #view-home .ac-hero-copy .ac-assure li { white-space: nowrap; }
}

@media (max-width: 720px) {
  #view-home .ac-promo-in { flex-wrap: wrap; gap: 6px 10px; text-align: center; }
  #view-home .ac-promo-txt { font-size: 13px; }

  #view-home .ac-assure { flex-direction: column; align-items: center; gap: 8px; }

  /* Chapitres : toujours cinq sur une rangee (28 oct. 2026), plus serres. */
  #view-home .ac-film-chap { padding: 16px 10px 4px; }
  #view-home .ac-film-chap-jauge { left: 10px; right: 10px; }

  /* Comparatif : toujours trois colonnes cote a cote, plus serrees. */
  #view-home .ac-comp-table th,
  #view-home .ac-comp-table td { padding-left: 9px; padding-right: 9px; }
  #view-home .ac-comp-table thead th { font-size: 13px; white-space: normal; }
  #view-home .ac-comp-tete-ico,
  #view-home .ac-comp-marque { display: block; margin: 0 0 4px; }
  #view-home .ac-comp-table tbody th { font-size: 11.5px; }
  #view-home .ac-comp-table tbody td { padding-left: 9px; font-size: 12px; }
  #view-home .ac-comp-table tbody td > svg { position: static; display: block; margin-bottom: 4px; transform: none; }

  #view-home .ac-q summary { padding-right: 36px; font-size: 15px; }
  #view-home .ac-r { padding-right: 0; }
}


/* Fenetre etroite, formules toujours cote a cote : colonnes un peu moins
   aerees et fanion resserre, sinon « Notre recommandation » (insecable)
   faisait deborder la colonne de Pro sous 700 px. */
@media (max-width: 760px) {
  #view-home .ac-formule,
  #view-home .ac-formule.featured { padding-inline: 12px; }
  #view-home .ac-formule-fanion { padding: 3px 7px; font-size: 10px; letter-spacing: 0.03em; }
}

@media (max-width: 680px) {
  #view-home .ac-formule,
  #view-home .ac-formule.featured { padding-inline: 9px; }
  #view-home .ac-formule-fanion { padding: 2px 6px; font-size: 9.5px; letter-spacing: 0.01em; }
}

/* Telephones : la presentation centree, le quartier dessous, puis la
   recherche (centree comme le texte ; les reponses, elles, restent
   alignees a gauche pour se lire). */
@media (max-width: 600px) {
  #view-home .ac-hero { padding: 48px 0 60px; }
  #view-home .ac-hero-in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    justify-items: center;
  }
  #view-home .ac-hero-copy { grid-column: auto; grid-row: auto; padding-top: 0; align-items: center; text-align: center; max-width: 640px; }
  #view-home .ac-hero-copy :is(.ac-offre, .ac-actions, .ac-assure) { justify-content: center; }
  #view-home .ac-hero-visuel { grid-column: auto; grid-row: auto; justify-self: center; max-width: 520px; margin-top: 40px; }
  #view-home .ac-question { grid-column: auto; grid-row: auto; justify-self: center; max-width: 560px; margin-top: 32px; }
  #view-home :is(.ac-question-titre, .ac-question-sous, .ac-question-autre) { text-align: center; }
  #view-home .ac-question-idees { justify-content: center; }

  #view-home .ac-lead { margin-top: 22px; }
  #view-home .ac-offre { margin: 28px 0 26px; }
  #view-home .ac-actions { flex-direction: column; align-items: stretch; width: 100%; }
  #view-home .ac-actions .ac-btn { width: 100%; }
  #view-home .ac-hero-copy .ac-assure { display: grid; justify-content: center; gap: 10px 18px; }
  #view-home .ac-hero-copy .ac-assure li { white-space: normal; }

  /* Chapitres de la video : deux par rangee, tous visibles ; le cinquieme
     prend la largeur. La ligne blanche ne separe que les deux d'une rangee. */
  #view-home .ac-film-chapitres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 10px;
  }
  #view-home .ac-film-chapitres li + li { border-left: 0; }
  #view-home .ac-film-chapitres li:nth-child(2n) { border-left: 1px solid var(--ac-ligne); }
  #view-home .ac-film-chapitres li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  #view-home .ac-film-chap { padding: 18px 14px 4px; }
  #view-home .ac-film-chap-jauge { left: 14px; right: 14px; }

  /* Les formules passent l'une sous l'autre (au-dessus de 600 px, elles
     restent cote a cote comme sur grand ecran, 28 oct.) ; la ligne blanche
     devient horizontale. */
  #view-home .ac-formules { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; max-width: 420px; }
  #view-home .ac-formule,
  #view-home .ac-formule.featured { grid-row: auto; grid-template-rows: none; padding: 0; }
  #view-home .ac-formule + .ac-formule {
    margin-top: 34px;
    padding-top: 34px;
    border-left: 0;
    border-top: 1px solid var(--ac-ligne);
  }
  #view-home .ac-formule-pour { min-height: 0; }
}


/* ---------------------------------------------------------------- 14.
   Mouvement reduit

   Reglage du systeme ou « Reduire les animations » du panneau : plus de
   deplacement ni de flou, tout est affiche d'emblee ; les changements de
   couleur restent.
--------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #view-home.ac-anime .ac-up { opacity: 1; transform: none; transition: none; }
  #view-home .ac-hero-copy > *,
  #view-home .ac-hero-visuel,
  #view-home .ac-question,
  #view-home .ac-question-res > * { animation: none; }
  #view-home .ac-q[open] .ac-r { animation: none; }
  #view-home .ac-idee:active,
  #view-home .ac-question-effacer:active { transform: none; }
  #view-home .ac-btn:active,
  #view-home .ac-btn:hover::after,
  #view-home .ac-film-chap:active,
  #view-home .ac-promo-cta:active { transform: none; }
}

html[data-animations="non"] #view-home.ac-anime .ac-up { opacity: 1; transform: none; transition: none; }
html[data-animations="non"] #view-home .ac-hero-copy > *,
html[data-animations="non"] #view-home .ac-hero-visuel,
html[data-animations="non"] #view-home .ac-question,
html[data-animations="non"] #view-home .ac-question-res > * { animation: none; }
html[data-animations="non"] #view-home .ac-q[open] .ac-r { animation: none; }