/* ═══════════════════════════════════════════════════════════════════
   LE HERO : une recherche Google, en bandeau large

   Ce que la scène joue, en boucle de 11 secondes : la requête s'écrit,
   trois résultats tombent, « Votre entreprise » est troisième, le curseur
   la saisit et la glisse dans l'emplacement d'annonce, au-dessus de tout.

   Elle ne promet pas la première place — la FAQ de cette page dit qu'on
   ne peut pas la promettre. Elle montre ce qui est vrai : l'annonce se
   paie au-dessus des résultats naturels, elle ne se gagne pas.

   Trois règles de construction :

   1. L'ÉTAT AU REPOS EST L'ÉTAT FINAL. Aucune animation ne « révèle »
      quoi que ce soit depuis le néant : le CSS de base montre la SERP
      terminée, annonce en place. Les images-clés partent d'un état
      antérieur et y reviennent. Sous prefers-reduced-motion — où la
      charte coupe toute animation d'un `animation:none!important` — on
      voit donc une scène complète et lisible, pas une boîte vide.

   2. LA GÉOMÉTRIE VIT DANS QUATRE VARIABLES (--x, --w, --top, --pitch).
      Les images-clés s'en servent aussi, donc la version téléphone ne
      redéclare que ces quatre nombres au lieu de toute la chorégraphie.

   3. L'UNITÉ DE DESSIN EST EN cqi, PAS EN vw. Le cadre fait toujours le
      même nombre d'em quelle que soit la largeur de l'écran : la mise en
      page ne peut pas se décaler entre deux points de rupture.

   Le piège, et il coûte cher : sur un élément positionné, `top` et `left`
   en em se résolvent sur SA PROPRE font-size, pas sur l'unité de dessin.
   Un élément qui porte `font-size:.6em` et `top:1em` se pose donc à .6em
   du haut, pas à 1em. Deux issues, toutes deux employées ici : garder la
   font-size à 1em sur l'élément positionné et descendre la taille de texte
   sur un enfant (le logo, le panneau de droite), ou positionner en % du
   cadre (les numéros de rang). Ne jamais mélanger les deux sur un même
   élément sans le dire.
   ═══════════════════════════════════════════════════════════════════ */
.scene{margin-top:clamp(28px,3.4vw,44px);container-type:inline-size}

.serp{
  --x:3em; --w:34em; --top:10.4em; --pitch:5.1em; --h:4.5em;
  position:relative;overflow:hidden;background:var(--deep);
  border:1px solid var(--deep-line);aspect-ratio:2/1;
  font-size:clamp(7px,1.78cqi,24px);
}
/* left en %, pas en em : la légende porte une font-size en px. */
.serp::after{content:attr(data-legende);position:absolute;left:5.2%;bottom:11px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(234,240,236,.32)}
.serp b,.serp u{display:block;position:absolute;font-style:normal;text-decoration:none}

/* ---------- le mot-symbole ----------
   Approximation en CSS : les six lettres aux couleurs de la marque, dans
   la police du site. Ce n'est pas le fichier officiel, et c'est voulu —
   voir la note de production sur l'usage de la marque. */
.serp .glogo{left:var(--x);top:1.9em;font-size:1em;display:flex;line-height:1}
.serp .glogo i{position:static;display:inline;font-style:normal;
  font-size:2.1em;font-weight:500;letter-spacing:-.045em;line-height:1}
.serp .glogo i:nth-child(1){color:#4285F4}
.serp .glogo i:nth-child(2){color:#EA4335}
.serp .glogo i:nth-child(3){color:#FBBC05}
.serp .glogo i:nth-child(4){color:#4285F4}
.serp .glogo i:nth-child(5){color:#34A853}
.serp .glogo i:nth-child(6){color:#EA4335}

/* ---------- la barre de recherche ---------- */
.serp .barre{position:absolute;left:var(--x);top:5.2em;width:var(--w);height:3.3em;
  border:.09em solid var(--deep-line);background:rgba(234,240,236,.05);
  display:flex;align-items:center;gap:1em;padding:0 1.15em}
.serp .loupe{position:relative;flex:none;width:1.1em;height:1.1em;
  border:.15em solid var(--deep-mut);border-radius:50%}
.serp .loupe::after{content:"";position:absolute;right:-.4em;bottom:-.25em;
  width:.58em;height:.15em;background:var(--deep-mut);transform:rotate(45deg)}
.serp .champ{position:relative;flex:1;height:100%}
.serp .tape{position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:.95em;color:var(--on-deep);white-space:nowrap;
  animation:gaTape 11s steps(25) infinite}
/* le curseur de saisie voyage en pas de caractère, sur la même cadence :
   la police est à chasse fixe, donc 1ch = exactement une lettre tapée. */
.serp .caret{left:0;top:50%;width:1.5px;height:1.4em;margin-top:-.7em;
  background:var(--accent-2);font-family:var(--mono);font-size:.95em;
  opacity:0;animation:gaCaret 11s steps(25) infinite}
@keyframes gaTape{0%{clip-path:inset(0 100% 0 0)}
  14%,95%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes gaCaret{0%{transform:translateX(0);opacity:1}
  14%{transform:translateX(25ch);opacity:1}
  17%,100%{transform:translateX(25ch);opacity:0}}

/* ---------- le rang, dans la gouttière ----------
   Il numérote la PLACE sur la page, pas le classement naturel : quand
   l'annonce se pose en haut, elle est bien première à l'écran. */
/* en % du cadre : ces trois-là portent une font-size, donc l'em y mentirait.
   Ils sont masqués sur téléphone, où le cadre change de proportions. */
.serp .rg{left:1.9%;font-family:var(--mono);font-size:.85em;font-weight:700;
  color:rgba(234,240,236,.28)}
.serp .rg1{top:43%}
.serp .rg2{top:61.2%}
.serp .rg3{top:79.4%}

/* ---------- les trois résultats ---------- */
.serp .r{position:absolute;left:var(--x);width:var(--w);height:var(--h);
  padding:.7em 1.1em;background:rgba(234,240,236,.04);
  border:.09em solid transparent;z-index:1}
.serp .r .url{display:block;font-family:var(--mono);font-size:.62em;
  letter-spacing:.05em;color:var(--deep-mut)}
.serp .r .ti{display:block;margin-top:.4em;font-size:.88em;font-weight:600;
  letter-spacing:-.015em;line-height:1.2;color:var(--on-deep)}
.serp .r .de{display:block;margin-top:.4em;font-size:.7em;line-height:1.3;
  color:var(--deep-mut)}
/* les concurrents restent des barres : on ne va pas écrire l'annonce des
   autres, et l'œil doit tomber sur la vôtre. */
.serp .r--c1 .ti,.serp .r--c2 .ti{height:.66em;width:62%;
  background:rgba(234,240,236,.32)}
.serp .r--c1 .de,.serp .r--c2 .de{height:.44em;width:90%;
  background:rgba(234,240,236,.15)}
.serp .r--c1 .de2,.serp .r--c2 .de2{width:54%;margin-top:.32em}

/* right et top sont ici en em de .6 : les valeurs sont donc divisées par .6
   pour retomber sur 1,1 et 0,85 unité de dessin. */
.serp .lab{position:absolute;right:1.83em;top:1.42em;
  font-family:var(--mono);font-size:.6em;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-2);border:.11em solid var(--accent-2);padding:.25em .6em;
  animation:gaLab 11s linear infinite}

/* au repos : l'annonce est en place, en haut, en jade. */
.serp .r--vous{top:var(--top);z-index:3;
  border-color:var(--accent-2);background:rgba(62,206,164,.09);
  animation:gaVous 11s cubic-bezier(.35,0,.15,1) infinite,
            gaCadre 11s linear infinite}
.serp .r--c1{top:calc(var(--top) + var(--pitch));
  animation:gaC1 11s cubic-bezier(.4,0,.2,1) infinite}
.serp .r--c2{top:calc(var(--top) + 2 * var(--pitch));
  animation:gaC2 11s cubic-bezier(.4,0,.2,1) infinite}

/* « Votre entreprise » : 3e place, saisie, glissée, déposée en haut */
@keyframes gaVous{
  0%,19%{opacity:0;box-shadow:none;
    transform:translateY(calc(2 * var(--pitch))) scale(1) rotate(0)}
  25%,31%{opacity:1;box-shadow:none;
    transform:translateY(calc(2 * var(--pitch))) scale(1) rotate(0)}
  35%{opacity:1;box-shadow:0 .7em 1.8em rgba(0,0,0,.6);
    transform:translateY(calc(2 * var(--pitch))) scale(1.025) rotate(-.7deg)}
  48%{opacity:1;box-shadow:0 .7em 1.8em rgba(0,0,0,.6);
    transform:translateY(0) scale(1.025) rotate(-.7deg)}
  53%,95%{opacity:1;box-shadow:none;transform:translateY(0) scale(1) rotate(0)}
  100%{opacity:0;box-shadow:none;
    transform:translateY(calc(2 * var(--pitch))) scale(1) rotate(0)}}
/* le cadre jade et le badge n'arrivent qu'au dépôt : avant, c'est un
   résultat naturel comme les autres. */
@keyframes gaCadre{0%,50%{border-color:transparent;background:rgba(234,240,236,.04)}
  56%,95%{border-color:var(--accent-2);background:rgba(62,206,164,.09)}
  100%{border-color:transparent;background:rgba(234,240,236,.04)}}
@keyframes gaLab{0%,52%{opacity:0}58%,95%{opacity:1}100%{opacity:0}}

/* les deux concurrents descendent d'un cran pour laisser la place */
@keyframes gaC1{0%,15%{opacity:0;transform:translateY(calc(-1 * var(--pitch)))}
  21%,42%{opacity:1;transform:translateY(calc(-1 * var(--pitch)))}
  48%,95%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(calc(-1 * var(--pitch)))}}
@keyframes gaC2{0%,17%{opacity:0;transform:translateY(calc(-1 * var(--pitch)))}
  23%,39%{opacity:1;transform:translateY(calc(-1 * var(--pitch)))}
  45%,95%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(calc(-1 * var(--pitch)))}}

/* ---------- l'emplacement visé, le temps du glisser ---------- */
.serp .cible{left:var(--x);top:var(--top);width:var(--w);height:var(--h);z-index:2;
  border:.11em dashed var(--accent-2);background:rgba(62,206,164,.05);
  opacity:0;animation:gaCible 11s linear infinite}
@keyframes gaCible{0%,32%{opacity:0}37%,47%{opacity:.6}52%,100%{opacity:0}}

/* ---------- le curseur ----------
   Positionné en em dérivés des mêmes variables que les cartes : la version
   téléphone n'a donc rien à redéclarer ici. */
.serp .curs{width:1.15em;height:1.7em;background:var(--on-deep);z-index:4;
  clip-path:polygon(0 0,0 88%,25% 66%,45% 100%,64% 91%,45% 57%,76% 55%);
  filter:drop-shadow(0 .12em .28em rgba(0,0,0,.6));
  opacity:0;animation:gaCurs 11s cubic-bezier(.4,0,.2,1) infinite}
@keyframes gaCurs{
  0%,22%{left:calc(var(--x) + 21em);top:calc(var(--top) + 3.4 * var(--pitch));
    opacity:0;transform:scale(1)}
  27%{opacity:1}
  33%{left:calc(var(--x) + 6em);top:calc(var(--top) + 2 * var(--pitch) + 1.5em);
    opacity:1;transform:scale(1)}
  36%,47%{left:calc(var(--x) + 6em);transform:scale(.86)}
  48%{left:calc(var(--x) + 6em);top:calc(var(--top) + 1.5em);transform:scale(.86)}
  53%{left:calc(var(--x) + 6em);top:calc(var(--top) + 1.5em);transform:scale(1)}
  60%{transform:scale(.86)}
  65%{transform:scale(1)}
  82%,100%{left:calc(var(--x) + 6em);top:calc(var(--top) + 1.5em);opacity:0}}

/* ---------- le panneau de droite ----------
   Un seul élément positionné, à font-size 1em : la carte et la légende
   vivent dedans, en flux, et peuvent donc porter leur propre taille de
   texte sans décaler quoi que ce soit. */
.serp .rule{left:39.2em;top:8em;width:.07em;height:13em;background:var(--deep-line)}
.serp .panneau{position:absolute;left:41.6em;top:11.6em;width:12.8em;font-size:1em}
.serp .carte{position:static;width:auto;height:auto;
  display:inline-flex;align-items:center;gap:.7em;padding:.8em 1.05em;
  background:var(--accent-2);color:var(--deep);
  font-family:var(--mono);font-size:.82em;font-weight:700;letter-spacing:.05em;
  white-space:nowrap;animation:gaCarte 11s cubic-bezier(.3,1.35,.4,1) infinite}
.serp .carte i{position:static;display:block;flex:none;width:.5em;height:.95em;
  border-right:.17em solid var(--deep);border-bottom:.17em solid var(--deep);
  transform:rotate(45deg) translate(-.06em,-.1em)}
.serp .dit{display:block;margin-top:1.4em;
  font-size:.78em;line-height:1.5;color:var(--deep-mut);
  animation:gaDit 11s linear infinite}
@keyframes gaCarte{0%,63%{opacity:0;transform:translateY(.9em) scale(.9)}
  71%,95%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-.4em)}}
@keyframes gaDit{0%,69%{opacity:0}76%,95%{opacity:1}100%{opacity:0}}

/* ---------- format étroit ----------
   Requête de conteneur et non de media : ce qui compte est la largeur de la
   scène, pas celle de la fenêtre. La règle vaut donc aussi le jour où la
   scène sera reprise dans une colonne étroite.
   Le panneau de droite disparaît, la carte passe en surimpression, et les
   quatre variables suffisent à redessiner toute la chorégraphie. */
@container (max-width:720px){
  .serp{--x:1.5em; --w:26.4em; --top:8.3em; --pitch:4.5em; --h:4em;
    aspect-ratio:5/4;font-size:clamp(7px,3.4cqi,26px)}
  /* la taille reste sur les lettres, jamais sur le conteneur positionné :
     sinon top:1.3em se résout sur 1,85em et le logo retombe sur la barre. */
  .serp .glogo{top:1.3em}
  .serp .glogo i{font-size:1.85em}
  .serp .barre{top:4.1em;height:2.9em}
  .serp .rg,.serp .rule,.serp .dit{display:none}
  .serp .r .de{display:none}
  .serp .r--c1 .de,.serp .r--c2 .de{display:block}
  .serp .panneau{left:auto;right:1.4em;top:auto;bottom:2.4em;width:auto}
  .serp::after{font-size:9px}
}

/* ---------- les trois conditions, puis les trois limites ----------
   Même composant que la cartographie : trois faces sur le bandeau graphite.
   Ici deux sections l'emploient, l'une avec titre de face, l'autre sans. */
.duo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--deep-line);border:1px solid var(--deep-line)}
.duo--trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.face{background:var(--deep);padding:clamp(24px,3vw,34px)}
.face .k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-2);font-weight:700}
.face strong{display:block;margin:12px 0 14px;font-size:clamp(18px,2.1vw,22px);
  font-weight:700;letter-spacing:-.026em;line-height:1.18}
.face .quoi{font-size:14.5px;color:var(--deep-mut);line-height:1.66}
.face .quoi b{color:var(--on-deep)}
/* sur graphite, le vert d'accent du corps de texte n'a pas assez de contraste :
   c'est l'accent clair qui sert de couleur de lien, ici et dans le paragraphe
   de bascule. */
.face .quoi a,.apres a{color:var(--accent-2);text-decoration:underline;
  text-underline-offset:2px}

.apres{margin-top:clamp(24px,3vw,34px);font-size:clamp(15.5px,1.5vw,17px);
  color:var(--deep-mut);max-width:74ch;line-height:1.66}
.apres b{color:var(--on-deep)}

/* ---------- ce que contient la gestion ---------- */
.prose-liste{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px}
.prose-liste li{position:relative;padding-left:19px;
  font-size:15px;color:var(--muted);line-height:1.6}
.prose-liste li::before{content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;background:var(--accent)}
.prose-liste li b{color:var(--ink);font-weight:700}
/* deux colonnes, pas trois : les entrées commencent par un intitulé en gras
   suivi d'une phrase entière, et à trois colonnes chaque ligne ne tient plus
   que quatre ou cinq mots. */
.prose-liste--deux{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px clamp(24px,4vw,56px)}
@media (max-width:760px){
  .prose-liste--deux{grid-template-columns:minmax(0,1fr)}
}

/* ---------- les quatre premières semaines ---------- */
.jours{margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.jours .j{background:var(--surface);padding:18px 22px;
  display:grid;grid-template-columns:minmax(0,92px) minmax(0,1fr);gap:22px;align-items:start}
.jours .d{font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-txt);padding-top:3px}
.jours div{font-size:14.5px;color:var(--muted);line-height:1.66}
.jours b{color:var(--ink);font-weight:700}

/* ---------- les trois lignes de tarif ----------
   Une seule carte est sombre : celle qui engage. Les deux autres restent
   parfaitement lisibles — on met en avant, on ne dévalorise pas. */
.offres{margin-top:clamp(28px,3.6vw,44px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,20px);align-items:start}

.of{background:var(--surface);border:1px solid var(--line);
  padding:clamp(24px,2.8vw,32px);display:flex;flex-direction:column;height:100%}
/* deux lignes réservées : sinon un intitulé qui passe à la ligne décale son
   prix et les trois montants ne s'alignent plus */
.of .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-txt);display:block;line-height:1.5;
  min-height:calc(2 * 1.5em)}
.of .k em{font-style:normal;color:var(--muted)}
.of .montant{margin:14px 0 8px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1}
.of .montant .n{font-size:clamp(34px,4.4vw,48px);font-weight:600}
.of .montant .u{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.of .cond{font-size:13.5px;color:var(--muted);line-height:1.55}
.of ul{list-style:none;margin:22px 0 24px;padding:22px 0 0;display:grid;gap:11px;
  border-top:1px solid var(--line-soft)}
/* puce en position absolue, jamais en flexbox : un <b> dans un li en
   display:flex devient un élément de flex et part en colonne */
.of li{position:relative;padding-left:19px;
  font-size:13.8px;color:var(--muted);line-height:1.55}
.of li::before{content:"";position:absolute;left:0;top:7px;
  width:6px;height:6px;background:var(--accent)}
.of li b{color:var(--ink);font-weight:700}
/* ce que la ligne ne contient pas : dit, pas caché */
.of li.non::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.of li.non{color:var(--muted);opacity:.82}
.of .btn-row{margin-top:auto}
.of .btn{width:100%}
.of .fin{margin-top:16px;font-size:12.5px;color:var(--muted);line-height:1.55}

.of--phare{background:var(--deep);color:var(--on-deep);border-color:var(--deep)}
.of--phare .k{color:var(--accent-2)}
.of--phare .k em{color:var(--deep-mut)}
.of--phare .cond,.of--phare li{color:var(--deep-mut)}
.of--phare .montant .u{color:var(--deep-mut)}
.of--phare ul{border-top-color:var(--deep-line)}
.of--phare li b{color:var(--on-deep)}
.of--phare .fin{color:var(--accent-2)}

.offres-note{margin-top:clamp(20px,2.4vw,28px);font-size:14px;color:var(--muted);
  line-height:1.65;max-width:74ch}
.offres-note b{color:var(--ink);font-weight:700}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .duo,.duo--trois{grid-template-columns:minmax(0,1fr)}
  .offres{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .jours .j{grid-template-columns:minmax(0,1fr);gap:8px}
}