/* ===========================================================================
   TEC'OFFICE M08 — page ETUDE : feuille des scenes
   ---------------------------------------------------------------------------
   Rien ici ne cache un element par defaut : les etats de depart des scenes
   sont poses par GSAP (assets/js/scenes-etude.js). Sans GSAP, la page reste
   lisible telle quelle.
   Exception volontaire : le parcours en six etapes (passage d'une etape a
   l'autre, cote d'avancement, cartes de reponse) est en CSS + JavaScript
   simple, car il doit rester agreable meme sans GSAP. Animations reduites :
   fondus seulement, aucun deplacement.
   =========================================================================== */

/* ---- 0. HERO : masques du titre (poses par le script) --------------------- */
.phero h1 .h1m {
  display: inline-block; vertical-align: top; overflow: hidden;
  padding: .1em .06em .12em; margin: -.1em -.06em -.12em;
  color: inherit; font-weight: inherit;
}
.phero h1 .h1i { display: inline-block; color: inherit; font-weight: inherit; }

/* ---- 1. PASSAGE D'UNE ETAPE A L'AUTRE -------------------------------------
   L'etape qui arrive glisse de 22 px et se pose (230 ms, ease-out fort) ;
   celle qui part s'efface plus vite (130 ms, voir scenes-etude.js) dans le
   sens oppose. Le sens suit la lecture (--et-sens : 1 on avance, -1 on
   revient). La hauteur du formulaire suit en douceur. */
@keyframes et-pane {
  from { opacity: 0; transform: translate3d(calc(var(--et-sens, 1) * 22px), 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes et-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes et-monte {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
/* 60 ms de retenue : l'etape qui part a le temps de s'effacer, les deux ne
   se superposent presque pas (sortie 130 ms + entree 230 ms < 300 ms) */
.wbody .wpane.on { animation: et-pane .23s cubic-bezier(.23, 1, .32, 1) .06s both; }
/* le contenu de l'etape arrive en cascade tres courte (30 ms) */
.wbody .wpane.on > * { animation: et-monte .23s cubic-bezier(.23, 1, .32, 1) .06s backwards; }
.wbody .wpane.on > :nth-child(2) { animation-delay: .09s; }
.wbody .wpane.on > :nth-child(3) { animation-delay: .12s; }
.wbody .wpane.on > :nth-child(4) { animation-delay: .15s; }
.wbody .wpane.on > :nth-child(n+5) { animation-delay: .18s; }
/* l'etape qui s'en va (posee par le script le temps de sortir) */
.wbody .wpane.et-sort { display: block; position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }

/* l'ecran « Merci » : moment rare, il merite une cascade (50 ms entre lignes) */
.wbody .wdone.on { animation: et-fondu .2s linear both; }
.wbody .wdone.on > * { animation: et-monte .3s cubic-bezier(.23, 1, .32, 1) backwards; }
.wbody .wdone.on > :nth-child(2) { animation-delay: .06s; }
.wbody .wdone.on > :nth-child(3) { animation-delay: .12s; }
.wbody .wdone.on > :nth-child(4) { animation-delay: .18s; }
.wbody .wdone.on > :nth-child(5) { animation-delay: .24s; }
.wbody .wdone.on > :nth-child(6) { animation-delay: .3s; }
@keyframes et-tampon {
  from { opacity: 0; transform: scale(1.6); }
  to   { opacity: 1; transform: none; }
}
.wbody .wdone.on .wdone-ic { animation: et-tampon .42s cubic-bezier(.23, 1, .32, 1) .05s backwards; }

/* ---- 2. LA COTE D'AVANCEMENT ----------------------------------------------
   La barre de 2 px devient une cote de dessinateur : deux talons, une ligne
   de rappel, six graduations qui passent a l'encre une a une, un trait epais
   qui se remplit et un losange qui marque l'etape en cours. */
.wiz .wprog {
  height: 15px; overflow: visible; background: none; border-radius: 0;
  border-left: 1px solid var(--ink2); border-right: 1px solid var(--ink2);
}
.wiz .wprog::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line2);
}
.wiz .wprog-f {
  top: 6px; height: 3px; border-radius: 0;
  transition: transform .42s cubic-bezier(.23, 1, .32, 1);
}
.wp-tick {
  position: absolute; top: 3px; width: 1px; height: 9px; margin-left: -.5px; background: var(--line2);
  transition: background .2s ease .12s, height .25s cubic-bezier(.23, 1, .32, 1) .12s, top .25s cubic-bezier(.23, 1, .32, 1) .12s;
}
.wp-tick.on { background: var(--ink); height: 15px; top: 0; }
.wp-mark {
  position: absolute; top: 7.5px; left: 16.6667%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  background: var(--ink); border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--ink);
  transform: rotate(45deg); pointer-events: none;
  transition: left .42s cubic-bezier(.23, 1, .32, 1);
}
.wcount { transition: none; }

/* ---- 3. CARTES DE REPONSE ---------------------------------------------------
   Survol (souris seulement) : la carte se souleve, quatre reperes d'angle se
   resserrent comme un cadrage. Appui : elle s'enfonce (scale .97). Choisie :
   reperes a l'encre et pastille qui se pose. */
.opt, .chk {
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease,
    transform .2s cubic-bezier(.23, 1, .32, 1);
}
.chk { position: relative; }
.opt::before, .chk::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none; z-index: 1; opacity: 0;
  background:
    linear-gradient(var(--ink2), var(--ink2)) 0 0 / 1px 12px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) 0 0 / 12px 1px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) 100% 0 / 1px 12px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) 100% 0 / 12px 1px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) 0 100% / 1px 12px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) 0 100% / 12px 1px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) 100% 100% / 1px 12px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) 100% 100% / 12px 1px no-repeat;
  transition: opacity .2s ease, inset .25s cubic-bezier(.23, 1, .32, 1);
}
.opt::after { z-index: 2; }
.opt[aria-pressed="true"]::before, .chk:has(input:checked)::before { opacity: 1; inset: 5px; }
.opt.opt-eco[aria-pressed="true"]::before { opacity: .55; }
@keyframes et-coche { from { transform: scale(.55); } to { transform: none; } }
.opt[aria-pressed="true"]::after { animation: et-coche .3s cubic-bezier(.23, 1, .32, 1); }
.chk input:checked { animation: et-coche .26s cubic-bezier(.23, 1, .32, 1); }
.seg-b { transition: background .22s ease, color .22s ease, transform .16s cubic-bezier(.23, 1, .32, 1); }

/* appui : la carte s'enfonce, partout (souris et doigt) */
.opt:active, .chk:active { transform: scale(.97); }
.seg-b:active, .wstep:not([disabled]):active { transform: scale(.97); }
.stp-btn { transition: background .25s ease, color .25s ease, transform .14s cubic-bezier(.23, 1, .32, 1); }

/* survol : seulement avec une vraie souris (pas de survol colle au doigt) */
@media (hover: hover) and (pointer: fine) {
  .opt:hover:not(:active), .chk:hover:not(:active) { transform: translateY(-4px); }
  .opt:hover::before, .chk:hover::before { opacity: 1; inset: 6px; }
}
@media (hover: none), (pointer: coarse) {
  .opt:hover, .chk:hover { transform: none; box-shadow: none; }
  .opt:hover:not([aria-pressed="true"]), .chk:hover:not(:has(input:checked)) { border-color: var(--line2); }
  .opt[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .opt.opt-eco[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 1px var(--eco); }
  .chk:has(input:checked):hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .opt:active, .chk:active { transform: scale(.97); }
  .wstep:hover:not([disabled]) { transform: none; }
}

/* ---- 4. ANIMATIONS REDUITES : fondus, aucun deplacement ------------------- */
html.doux .wbody .wpane.on { animation: et-fondu .2s linear both; }
html.doux .wbody .wpane.on > *,
html.doux .wbody .wdone.on > *,
html.doux .wbody .wdone.on .wdone-ic { animation: none; }
html.doux .opt, html.doux .chk, html.doux .seg-b { transition: border-color .2s linear, background .2s linear, box-shadow .2s linear; }
html.doux .opt:hover, html.doux .chk:hover, html.doux .opt:active, html.doux .chk:active,
html.doux .seg-b:active, html.doux .wstep:active { transform: none; }
html.doux .opt[aria-pressed="true"]::after, html.doux .chk input:checked { animation: none; }
html.doux .wiz .wprog-f, html.doux .wp-mark, html.doux .wp-tick { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .wbody .wpane.on { animation: et-fondu .2s linear both; }
  .wbody .wpane.on > *, .wbody .wdone.on > * { animation: none; }
}

/* ---- 5. TITRES REVELES LIGNE PAR LIGNE ------------------------------------ */
.et-l {
  display: block;
  -webkit-clip-path: inset(-.3em -.2em -.1em -.2em);
          clip-path: inset(-.3em -.2em -.1em -.2em);
}
.et-l.fin { -webkit-clip-path: none; clip-path: none; }
.et-li { display: block; }

/* ---- 6. FILETS QUI SE TRACENT --------------------------------------------- */
.et-sans-haut { position: relative; border-top-color: transparent !important; }
.et-sans-bas  { position: relative; border-bottom-color: transparent !important; }
.et-filet {
  position: absolute; left: 0; right: 0; pointer-events: none; transform-origin: left center;
}
.next .nxt img { object-position: 50% 60%; filter: saturate(1.04) contrast(1.04) brightness(.84); }
/* la vraie photo (fauteuils clairs sur mur blanc) est bien plus claire que la
   video d'a cote : sans voile plus dense, l'etiquette sable de 9 px ne se
   lisait plus. Meme degrade que les cartes « Poursuivre » des autres pages. */
.next .nxt:has(> img)::after {
  background: linear-gradient(180deg, rgba(10,10,10,0) 12%, rgba(10,10,10,.48) 48%, rgba(10,10,10,.88) 100%);
}

/* ===========================================================================
   7. TELEPHONES ET TABLETTES — passe « responsive » du 07/10
   ---------------------------------------------------------------------------
   Tout ce qui suit est borne sous 1280 px : le bureau reste strictement tel
   qu'il a ete valide. En-tete, menu, pied de page et « Poursuivre la visite »
   ne sont pas traites ici (feuille commune). Aucun nom de champ, aucun id,
   aucune logique d'envoi n'est touche : seulement la mise en page.
   =========================================================================== */

/* Retour d'envoi impossible (reseau coupe, serveur muet) : le script remplit
   #werr sans lui remettre la classe .on, le message restait invisible. Il
   s'affiche des qu'il contient du texte, a toutes les largeurs (finitions du
   07/10 : au bureau aussi, le visiteur ne voyait rien quand l'envoi echouait). */
.werr:not(:empty) { display: block; }
.werr a { text-decoration: underline; text-underline-offset: 3px; }
/* ecran « Merci » : « Vos donnees et vos droits » se lit comme un lien
   (au bureau, il se confondait avec la note qui l'entoure) */
.wdone .wdone-note a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- 7a. Tablettes et telephones (<= 1100 px) ----------------------------- */
@media (max-width: 1100px) {
  /* gris des legendes un cran plus fonce : 10 px sur fond blanc doit se lire */
  .sec { --mute: #6d6c66; }
  /* saisie a 16 px : en dessous, iOS zoome sur le champ au toucher */
  .inp, .sel select { font-size: 16px; }

  /* reperes mono : 10 px au minimum (8,5 a 9,5 px au bureau) */
  .crumb, .plref, .pc-head, .phero-facts span, .sec .sec-tag, .wc-org, .wc-meta dt,
  .opt-n, .sl-scale, .recap-h span, .recap dt, .whint, .card .cref, .card .cspec { font-size: 10px; }
  .wcount, .wqn, .wsub, .fl, .stp-unit, .seg-b, .sl-lab, .sl-val em, .werr,
  .wdone .wdone-note { font-size: 10.5px; }
  .wc-meta dd { font-size: 11.5px; }
  .whint { color: var(--mute); }
  .fl i { color: var(--mute); }

  .endcta h2 { font-size: clamp(30px, 5.4vw, 58px); }
}

/* ---- 7b. Tablettes (761 - 1100 px) ---------------------------------------- */
@media (min-width: 761px) and (max-width: 1100px) {
  /* les six etapes sur une seule rangee, numero au-dessus du libelle
     (elles passaient sur deux rangees : 4 + 2, ou 5 + 1 orpheline) */
  .wsteps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .wstep { width: 100%; height: 100%; flex-direction: column; justify-content: flex-start;
    gap: 8px; padding: 10px 4px 9px; text-align: center; }
  .wsl { white-space: normal; font-size: 10px; letter-spacing: .1em; line-height: 1.35; }
  .wsn { width: 26px; height: 26px; font-size: 10px; }

  /* navigation du parcours : l'aide sur toute la largeur, puis les deux
     boutons (l'aide coincee entre eux tenait sur quatre lignes) */
  .wnav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "hint hint hint" "prev . next"; gap: 16px; align-items: center; }
  .wnav .whint { grid-area: hint; max-width: none; text-align: left; }
  #wprev { grid-area: prev; }
  #wnext { grid-area: next; }

  /* « Ce que vous recevez » : trois fiches en ligne, lues de gauche a droite
     (en deux colonnes, la troisieme restait seule sur sa rangee) */
  #contenu .cards { grid-template-columns: 1fr; gap: 18px; }
  #contenu .card {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-areas: "h h" "t p" "s p"; grid-template-rows: auto auto 1fr;
    column-gap: clamp(28px, 4.4vw, 52px);
  }
  #contenu .card > .card-h { grid-area: h; }
  #contenu .card > h3 { grid-area: t; margin: 22px 0 16px; }
  #contenu .card > p:not(.cspec) { grid-area: p; margin: 22px 0 0; max-width: none; }
  #contenu .card > .cspec { grid-area: s; align-self: end; }

  .endcta > .in { padding-top: clamp(96px, 11vh, 132px); padding-bottom: clamp(96px, 11vh, 132px); }
  /* titres de section a l'echelle de la tablette (29 px a 768 : trop menus) */
  .sec .sec-head h2 { font-size: clamp(30px, 4.4vw, 48px); }
}

/* ---- 7c. Telephones (<= 760 px) ------------------------------------------- */
@media (max-width: 760px) {
  /* lecture : 15 px au moins pour les textes courants */
  .wq p, .card p:not(.cspec) { font-size: 15px; line-height: 1.6; }
  .sec .sec-tag { max-width: none; line-height: 1.8; }

  /* etapes : numeros seuls, repartis sur toute la largeur (l'intitule de
     l'etape en cours est ecrit juste en dessous, dans « Etape 1 sur 6 ») */
  .wsl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wsteps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .wsteps > li { display: flex; justify-content: center; }
  .wstep { width: 100%; max-width: 56px; min-height: 46px; min-width: 0; padding: 8px 0; justify-content: center; }
  .wsn { width: 26px; height: 26px; font-size: 10px; }

  /* cartes de reponse : plus compactes, legende lisible */
  .optgrid { gap: 10px; }
  .opt { padding: 16px 18px 17px; gap: 6px; }
  .opt-t { font-size: 18px; }
  .opt-s { font-size: 15px; line-height: 1.5; max-width: none; padding-right: 4px; }
  .opt-plate { padding: 7px 10px; margin-bottom: 4px; }
  .opt-logo { height: 30px; }
  .chks { gap: 10px; }
  .chk { padding: 15px 16px 16px; gap: 13px; }
  .chk-t { font-size: 15px; }
  .chk-s { font-size: 15px; line-height: 1.5; margin-top: 6px; }

  /* compteur de machines : l'unite passe sous le compteur, alignee a gauche */
  .stp-unit { margin-left: 2px; flex-basis: 100%; }

  /* recapitulatif */
  .recap dd { font-size: 15px; }
  .recap dl > div { padding: 11px 0; gap: 14px; }

  /* navigation du parcours, au pouce : l'aide au-dessus, puis « precedent »
     en pastille carree et « suivant » sur toute la largeur restante
     (le libelle « Precedent » reste le nom accessible du bouton) */
  .wnav { display: grid; grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "hint hint" "prev next"; gap: 14px 10px; align-items: stretch; }
  .wnav .whint { grid-area: hint; text-align: center; max-width: none; line-height: 1.8; }
  #wprev { grid-area: prev; width: 56px; min-height: 54px; padding: 0; gap: 0;
    font-size: 0; letter-spacing: 0; justify-content: center; }
  #wprev .arwl { font-size: 18px; line-height: 1; }
  #wnext { grid-area: next; min-height: 54px; padding: 12px 16px; white-space: normal;
    text-align: center; line-height: 1.35; justify-content: center; }

  .endcta > .in > .mono { font-size: 11.5px; letter-spacing: .14em; line-height: 1.7; }
  .wq h3 .nw { white-space: nowrap; }
  /* liens d'appel : une vraie cible au doigt (44 px) */
  .wdone-tel, .cta-tel { min-height: 44px; }
  .crumb a { min-height: 44px; margin: -8px 0; }
}

/* ---- 7d. Telephones (<= 600 px) ------------------------------------------- */
@media (max-width: 600px) {
  main .btn { font-size: 11.5px; letter-spacing: .1em; }
  .endcta .cta-row .btn, .wdone-row .btn { width: 100%; justify-content: center; }
  .endcta .cta-row { gap: 12px; }

  /* effectif : le chiffre et la categorie sur une ligne, la legende dessous
     (quatre grandes cartes empilees prenaient pres de 700 px) */
  .optgrid.g4 .opt { display: grid; grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 12px; row-gap: 6px; align-items: baseline; padding: 15px 16px 16px; }
  .optgrid.g4 .opt-t { grid-column: 1; grid-row: 1; font-size: 19px; white-space: nowrap; }
  .optgrid.g4 .opt-n { grid-column: 2; grid-row: 1; padding-right: 22px; letter-spacing: .1em; }
  .optgrid.g4 .opt-s { grid-column: 1 / -1; grid-row: 2; }

  /* haut de page : les cartouches tiennent sur une ligne, sans trait
     orphelin en bout de ligne (doublons des cases ci-dessous retires) */
  .plref i:last-of-type, .plref em { display: none; }
  .pc-head > span:not(.pc-org), .pc-head > i:nth-of-type(2) { display: none; }
  .plref, .plref b, .pc-head, .pc-head b { letter-spacing: .08em; }
  /* fil d'Ariane : le chevron part avec l'element qui le suit */
  .crumb i { display: none; }
  .crumb i + a::before, .crumb i + span::before {
    content: "›"; display: inline-block; margin-right: 10px; color: rgba(255, 255, 255, .4);
  }
}

/* ---- 7e. Telephone a l'horizontale : le haut de page ne mange plus l'ecran */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 761px) and (max-width: 1279px) {
  :root { --sp: 72px; }
  .sec .sec-head { margin-bottom: 30px; }
  .endcta { margin-top: 84px; }
  .endcta > .in { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1279px) {
  .phero { min-height: 0; }
  .phero-in { padding-top: 34px; padding-bottom: 30px; }
  .phero h1 { margin: 16px 0 14px; }
  .plcart { margin-top: 18px; }
}

/* ===========================================================================
   8. RELECTURE du 07/10 — finitions telephone et tablette (toujours < 1280 px)
   =========================================================================== */

/* mots composes qui ne se coupent plus sur leur trait d'union
   (« rendez- / vous », « cout- / copie »), a toutes les largeurs.
   (Le separateur de milliers des curseurs est desormais une espace insecable
   ordinaire, posee par le script de la page : plus besoin de l'elargir.) */
.ce-nw { white-space: nowrap; }

/* bandeau final : voile renforce en bas, la ou sont les boutons et le lien
   « Showroom » (le bas de la photo est clair : le lien blanc s'y perdait,
   au bureau comme sur telephone) */
.endcta .sc-inkL {
  background:
    linear-gradient(0deg, rgba(10, 9, 7, .8) 0%, rgba(10, 9, 7, .56) 26%, rgba(10, 9, 7, 0) 56%),
    linear-gradient(96deg, rgba(13, 11, 8, .94) 0%, rgba(13, 11, 8, .83) 34%,
      rgba(12, 10, 8, .58) 66%, rgba(12, 10, 8, .44) 100%);
}

@media (max-width: 1100px) {
  /* haut de page : le fil d'Ariane passait a 60 % de blanc sur la partie
     claire de la photo (contraste proche de 2,8:1 en 10 px) */
  .phero .crumb { color: rgba(255, 255, 255, .86); }
  .phero .crumb i { color: rgba(255, 255, 255, .5); }

  /* pas de mot seul en derniere ligne : etiquettes equilibrees, paragraphes
     composes « au mieux » (navigateurs recents ; sinon rendu inchange) */
  .sec .sec-tag, .whint { text-wrap: balance; }
  .sec-lede, .phero .plede, .endcta p, .wq p, .card p, .opt-s, .chk-s, .wdone p { text-wrap: pretty; }
}

/* tablettes : l'etiquette de section tient sur deux lignes au plus, a cote
   du titre (elle passait sur trois, « possible » seul en bout) */
@media (min-width: 761px) and (max-width: 1100px) {
  .sec .sec-tag { max-width: 46ch; }
}

/* petits telephones : « Retour de l'etude » tient sur une ligne, comme sa
   voisine « Cout de l'etude » (a 360, « l'etude » passait seul dessous) */
@media (max-width: 400px) {
  .phero-facts span { letter-spacing: .12em; }
}

/* telephones : un voile en haut de la photo, sous le fil d'Ariane et la
   cartouche PL-07 (le haut droit de la photo est presque blanc) */
@media (max-width: 760px) {
  .phero .sc-inkL {
    background:
      linear-gradient(180deg, rgba(9, 8, 6, .5) 0%, rgba(9, 8, 6, .26) 22%, rgba(9, 8, 6, 0) 38%),
      linear-gradient(0deg, rgba(9, 8, 6, .6) 0%, rgba(9, 8, 6, .52) 32%, rgba(9, 8, 6, .42) 52%,
        rgba(9, 8, 6, .34) 68%, rgba(9, 8, 6, 0) 80%),
      linear-gradient(96deg, rgba(13, 11, 8, .93) 0%, rgba(13, 11, 8, .8) 34%,
        rgba(12, 10, 8, .44) 66%, rgba(12, 10, 8, .22) 100%);
  }
}