@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin.woff2?v=de2f1fe817) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/fonts/ibm-plex-sans-latin.woff2?v=b2c9031d9f) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/fonts/ibm-plex-sans-latin.woff2?v=b2c9031d9f) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/fonts/ibm-plex-sans-latin.woff2?v=b2c9031d9f) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  :root{
    --bg:#0D0D0D; --panel:#161616; --line:#262626; --line2:#3A3A3A;
    --ink:#F2F1EE; --dim:#A6A6A2; --mute:#8A8A86; --accent:#F08A30; --accent-ink:#F08A30;
    --gut:72px; --rhythm:210px;
    --disp:'Archivo','Helvetica Neue',Arial,sans-serif;
    --accent-vif:#F5A04F; --on-orange:#0D0D0D; --on-orange-dim:#4A3418;
    --halo:.5; --halo-rgb:240,138,48;
    /* ombres : 1 colle au bord (en-tete, menu du telephone), 2 flotte (menus, listes, messages, carte du
       formulaire), 3 fenetre (configurateur) ; charte courte, 30/09/2026 */
    --ombre-1:0 10px 30px rgba(0,0,0,.15); --ombre-2:0 18px 40px rgba(0,0,0,.35); --ombre-3:0 30px 90px rgba(0,0,0,.44);
  }
  [data-theme="light"],body:has(>#root[data-theme="light"]){
    --bg:#F5F3EE; --panel:#EBE8E1; --line:#DCD8D0; --line2:#C4BFB5;
    --ink:#16150F; --dim:#4A473F; --mute:#646055; --accent:#D9741A; --accent-ink:#A35009;
    --accent-vif:#E08D43; --on-orange:#1A0F04; --on-orange-dim:#3A2008;
    --halo:.44; --halo-rgb:217,116,26;
  }
  /* zones toujours sombres (charte courte, 30/09/2026) : le formulaire de contact et l'apercu du configurateur
     gardent les couleurs du theme sombre dans les deux themes ; leurs regles emploient les memes jetons que le site */
  .fcard,.mock{
    --bg:#0D0D0D; --panel:#161616; --line:#262626; --line2:#3A3A3A;
    --ink:#F2F1EE; --dim:#A6A6A2; --mute:#8A8A86; --accent:#F08A30; --accent-ink:#F08A30; --accent-vif:#F5A04F;
    --on-orange:#0D0D0D; --on-orange-dim:#4A3418; --halo-rgb:240,138,48;
  }
  *{box-sizing:border-box}
  /* grands titres de section portes par une balise h2 : on neutralise les marges et
     tailles par defaut du navigateur, les classes gardent la main (specificite nulle) */
  :where(h2.hbig,h2.big,h2.skt,h2.t){margin:0;font-size:inherit;font-weight:inherit}
  /* zones de toucher agrandies a 44 px environ, sans rien changer a l'affichage */
  .cfg .alt,.mhead a,.bc a,.phbc a,.fend .fup,.fg4 .fadr,.burger{position:relative}
  .cfg .alt::after,.mhead a::after,.bc a::after,.phbc a::after,.fend .fup::after,.fg4 .fadr::after,
  .burger::after{content:"";position:absolute;inset:-13px -4px}
  .cfg .alt::after{inset:-12px -4px}
  .fg4 .fadr::after{inset:-10px -4px}
  .burger::after{inset:-2px;border-radius:50%}
  /* le fond autour de la page, au-dela de 1440 px de large, suit le theme (Enzo, 08/10/2026 : il restait noir en
     theme clair) : le theme est pose sur #root, et body reprend ses jetons par :has (plus haut) ; sans :has, le
     fond reste sombre, comme avant */
  body{margin:0;background:var(--bg)}
  #root{max-width:1440px;margin:0 auto;background:var(--bg);color:var(--ink);
    font-family:'IBM Plex Sans',Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
  .g{font-family:'Archivo',sans-serif}
  a{color:var(--ink);text-decoration:none}
  /* aucun mot seul en fin de texte, y compris dans les textes ecrits par le JavaScript */
  :where(p,li,dd,summary){text-wrap:pretty}
  a:hover{color:var(--accent-ink)}

  /* HEADER */
  header{display:flex;align-items:center;justify-content:space-between;padding:24px var(--gut);
    position:sticky;top:0;background:var(--bg);z-index:30;border-bottom:1px solid var(--line);gap:24px;flex-wrap:wrap;
    transition:box-shadow .5s var(--ease),background .3s var(--ease)}
  /* la barre garde exactement la même hauteur du haut au bas de la page ;
     seule une ombre portée apparaît pour la décoller du contenu */
  header.tight{box-shadow:var(--ombre-1)}
  .hl{display:flex;align-items:center;gap:48px;flex-wrap:wrap}
  .logo{height:32px;width:auto;display:block}
  [data-theme="light"] .logo-d{display:block}
  [data-theme="light"] .logo-l{display:none}
  .logo-d{display:none}
  /* cette règle ne vise que la navigation de l'en-tête du site */
  header nav{display:flex;gap:32px;font-size:15px;font-weight:500;flex-wrap:wrap}
  .hr{display:flex;align-items:center;gap:20px}
  .ico{width:34px;height:34px;background:none;border:0;color:var(--dim);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
  .ico:hover{color:var(--accent-ink)}
  .flag{display:flex;width:21px;height:14px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px #00000022}
  .flag i{flex:1}
  /* ---- menu des langues (au drapeau) ---- */
  .lang{position:relative}
  .lbtn{display:flex;align-items:center;gap:8px;height:34px;padding:0 2px;background:none;border:0;cursor:pointer;color:var(--dim)}
  .lbtn:hover,.lang.on .lbtn{color:var(--accent-ink)}
  .lchev{display:block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
  .lang.on .lchev{transform:translateY(1px) rotate(-135deg)}
  /* le menu apparait en fondu et glisse legerement vers le bas ; il disparait de meme */
  .lmenu{position:absolute;top:calc(100% + 14px);left:50%;min-width:176px;z-index:40;
    opacity:0;visibility:hidden;transform:translate(-50%,-8px) scale(.98);transform-origin:50% 0;
    transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),visibility 0s linear .34s;
    padding:8px;background:var(--bg);border:1px solid var(--line2);border-radius:3px;box-shadow:var(--ombre-2)}
  .lang.on .lmenu{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);
    transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),visibility 0s}
  .lmenu button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:12px 16px;
    background:none;border:0;border-radius:3px;cursor:pointer;font:inherit;font-size:15px;color:var(--ink);text-align:start}
  .lmenu button:hover,.lmenu button:focus-visible{background:var(--panel);color:var(--accent-ink);outline:none}
  .lmenu button[aria-checked="true"]{color:var(--accent-ink)}
  /* point du choix en cours : menu des langues et liste deroulante du formulaire */
  .lmenu button[aria-checked="true"]::after,.fsell button[aria-selected="true"]::after{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
  /* bandeau sous l'en-tete : la traduction choisie n'existe pas encore */
  .lbar{position:fixed;z-index:29;top:var(--hdr,86px);left:50%;transform:translateX(-50%);width:min(100%,1440px);
    display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px var(--gut);
    background:var(--panel);border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--ink)}
  .lbar[hidden]{display:none}
  .lbar p{margin:0}
  /* son bouton est une pastille a contour (famille 3 des boutons, plus bas) */
  .lbar button{flex:none}
  /* bandeau des cookies, en bas de l'ecran (Enzo, 28/09/2026) : meme facture que le bandeau des langues.
     Il passe sous l'en-tete et son menu (z-index 30) et sous le configurateur : il ne cache jamais le menu
     ni ses boutons d'appel. Deux boutons identiques, de meme largeur : refuser est aussi simple qu'accepter. */
  .ckb{position:fixed;z-index:28;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,1440px);
    display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px var(--gut);
    background:var(--panel);border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--dim)}
  .ckb[hidden]{display:none}
  .ckb p{margin:0;text-wrap:pretty}
  .ckb p a{color:var(--accent-ink)}
  .ckbt{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  /* ses deux boutons sont des pastilles a contour (famille 3 des boutons, plus bas) */
  @media(max-width:767.98px){
    .ckb{flex-direction:column;align-items:stretch;gap:8px;padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom,0px));font-size:13px}
  }
  /* pied de page : « Gerer les cookies » rouvre le bandeau, meme allure que les liens voisins */
  .fmin .fck{background:none;border:0;padding:0;font:inherit;color:var(--dim);cursor:pointer;text-align:inherit}
  .fmin .fck:hover{color:var(--accent-ink)}
  .tel{font-family:var(--disp);font-size:15px;font-weight:600}
  /* variante du bouton principal : la pastille pleine de l'en-tete, qui doit tenir sur une ligne.
     Meme inversion en fondu lent que les boutons principaux des pages ; son calque est celui de la famille 1 (plus bas). */
  .devis{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;
    background:var(--accent);color:var(--on-orange);padding:12px 24px;font-size:15px;font-weight:600;
    border:1px solid var(--accent);border-radius:100px;
    transition:color 1.1s var(--ease)}
  /* texte orange vif sur le fond sombre du survol (l'accent du texte, plus fonce en theme clair, n'y fait que 3,3:1) */
  .devis:hover{color:var(--accent)}
  .devis:hover::before{opacity:1}

  /* ---- menu burger ----
     Mesure du 25/09/2026 : avec les écarts d'origine, l'en-tête ne tient plus sur une ligne
     sous 1335 px. Entre 1200 et 1340 px, les écarts se resserrent pour garder la navigation
     complète ; sous 1200 px, les liens passent dans un menu déroulant, le bouton de devis reste visible. */
  @media(max-width:1340px){
    .hl{gap:32px}
    header nav{gap:24px}
    .hr{gap:16px}
  }
  @media(max-width:1280px){
    header{gap:16px}
    .hl{gap:28px}
    header nav{gap:16px}
    .hr{gap:12px}
    .devis{padding:12px 20px}
  }
  .burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    width:44px;height:44px;padding:0;flex:none;background:none;color:var(--ink);cursor:pointer;
    border:1px solid var(--line2);border-radius:100px;transition:border-color .3s var(--ease),color .3s var(--ease)}
  .burger span{display:block;width:18px;height:1.5px;background:currentColor;
    transition:transform .3s var(--ease),opacity .16s var(--ease)}
  .burger:hover{color:var(--accent-ink);border-color:var(--accent-ink)}
  header.mopen .burger{border-color:var(--accent-ink)}
  header.mopen .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  header.mopen .burger span:nth-child(2){opacity:0}
  header.mopen .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  header nav .mx{display:none}
  @media(max-width:1200px){
    header{flex-wrap:nowrap}
    .hl{flex-wrap:nowrap}
    .burger{display:inline-flex}
    header nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
      padding:8px var(--gut) 32px;background:var(--bg);border-bottom:1px solid var(--line);
      box-shadow:var(--ombre-1);max-height:calc(100svh - var(--hdr,86px));overflow-y:auto}
    header.mopen nav{display:flex}
    header nav a{font-family:var(--disp);font-size:24px;font-weight:500;letter-spacing:-.02em;
      padding:16px 0;border-bottom:1px solid var(--line)}
    header nav a::after{display:none}
  }
  /* téléphone, moins de 768 px (Enzo, 27/09/2026) : l'en-tête ne garde que le logo et le bouton
     du menu. En bas du menu, deux icônes côte à côte, alignées à gauche : le téléphone (lance l'appel)
     et le thème (lune ou soleil, comme sur ordinateur) ; le devis reste dans le menu (« Contact & devis »). */
  @media(max-width:767.98px){
    .hr .ico,.hr .lang,.hr .tel,.hr .devis{display:none}
    header nav .mx{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding-top:24px}
    header nav .mx .mtel,.mth{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
      flex:none;padding:0;border:1px solid var(--line2);border-radius:100px;background:none;color:var(--ink);cursor:pointer;
      transition:border-color .3s var(--ease),color .3s var(--ease)}
    header nav .mx .mtel:hover,.mth:hover{color:var(--accent-ink);border-color:var(--accent-ink)}
    /* langues (28/09/2026) : le même bouton rond, avec le drapeau ; le menu s'ouvre vers le haut,
       aligné sur le bord gauche du bouton, pour rester dans l'écran et dans le menu */
    header nav .mx .lbtn{width:44px;height:44px;justify-content:center;padding:0;
      border:1px solid var(--line2);border-radius:100px;transition:border-color .3s var(--ease)}
    header nav .mx .lbtn:hover,header nav .mx .lang.on .lbtn{border-color:var(--accent-ink)}
    header nav .mx .lchev{display:none}
    header nav .mx .lmenu{top:auto;bottom:calc(100% + 10px);left:0;transform:translateY(8px) scale(.98);transform-origin:0 100%}
    header nav .mx .lang.on .lmenu{transform:none}
  }
  /* petits téléphones (360 à 400 px) : logo et bouton du menu un peu plus petits */
  @media(max-width:400px){
    header .logo{height:26px}
    .burger{width:40px;height:40px}
  }

  /* HERO ORANGE */
  /* ---- F1 : accroche photographique pleine largeur ----
     Une seule image porte le premier ecran. Le texte se pose dans son bas,
     sur un voile degrade. Pas de bouton plein, pas d'aplat orange. */
  .hero{position:relative;padding:0;background:#0D0D0D}
  /* l'image s'arrete un peu avant la ligne de flottaison : la reglette de
     chiffres depasse de --peek, pour signaler qu'il y a une suite */
  .himg{position:relative;min-height:calc(100vh - var(--hdr,86px) - var(--cal,0px) - var(--peek,64px));
    min-height:calc(100svh - var(--hdr,86px) - var(--cal,0px) - var(--peek,64px));
    background:radial-gradient(120% 90% at 30% 20%,#161616 0%,#0D0D0D 68%)}
  /* la legende du gabarit reste en haut : le bas est occupe par le texte */
  .hcap{position:absolute;left:var(--gut);top:24px;font-size:12px;letter-spacing:.14em;
    color:#8A8A86;line-height:1.7}
  .hveil{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,#000000CC 0%,#00000070 38%,#00000010 66%,#00000000 100%)}
  .htxt{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut) 48px;color:#F2F1EE}
  /* le sur-titre et le titre ne forment qu'un seul h1 : le rendu est
     identique, mais le metier et la ville entrent dans le titre principal */
  .hlab{display:block;font-family:'IBM Plex Sans',Helvetica,sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;
    line-height:1.5;text-transform:uppercase;color:#C9C6C0;margin-bottom:24px}
  .hero h1{margin:0 0 32px;font-family:var(--disp);font-size:60px;font-weight:600;letter-spacing:-.035em;
    line-height:1.02;max-width:none;text-wrap:balance}
  .htitle{display:block;max-width:15ch}
  .hrow{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
  .hrow p{margin:0;font-size:17px;line-height:1.6;color:#C9C6C0;max-width:40ch}
  .hacts{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
  /* Au survol, le liseret et le texte passent a l'orange de gauche a droite,
     sur la meme duree et la meme courbe : les deux avancent ensemble. */
  .hlnk{position:relative;display:inline-flex;align-items:center;gap:16px;font-size:17px;font-weight:600;
    color:#F2F1EE;padding-bottom:12px;transition:color .85s var(--ease)}
  .hlnk.q{color:#C9C6C0;font-weight:500}
  .hlnk i{position:absolute;left:0;right:0;bottom:0;height:1px;background:#F2F1EE;display:block}
  .hlnk.q i{background:#ffffff45}
  .hlnk i::after{content:'';position:absolute;inset:0;background:var(--accent);
    transform:scaleX(0);transform-origin:left;transition:transform .85s var(--ease)}
  .hlnk:hover i::after{transform:scaleX(1)}
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .hlnk{background-image:linear-gradient(to right,var(--accent) 50%,#F2F1EE 50%);
      background-size:200% 100%;background-position:100% 0;background-repeat:no-repeat;
      -webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;
      transition:background-position .85s var(--ease)}
    .hlnk.q{background-image:linear-gradient(to right,var(--accent) 50%,#C9C6C0 50%)}
    .hlnk:hover{background-position:0 0}
  }
  @media (prefers-reduced-motion: reduce){
    .hlnk,.hlnk i::after{transition:none}
  }
  .hbtns{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  /* ======== BOUTONS : TROIS FAMILLES (Enzo, 30/09/2026 : T1, S2, R1, F1, N1) ========
     Un seul reglage par famille pour la taille, la marge interieure, le texte, l'arrondi, la bordure
     et les etats, dans les deux themes. Les variantes gardees a part ont chacune leur raison, ecrite a cote.
     Appui (98,5 %) et onde au clic : micro.py ; contour clavier : regle commune de micro.py. */

  /* -- 2. bouton secondaire : contour gris ; au survol, contour et texte en accent du texte.
        Ecrit avant le principal : « Continuer » et « Valider » (.cbtn.main) portent aussi la classe .cbtn. -- */
  .b3,.cbtn,.fback,.eqb{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
    height:52px;padding:0 24px;font-family:inherit;font-size:17px;font-weight:500;line-height:1;white-space:nowrap;
    cursor:pointer;border:1px solid var(--line2);border-radius:3px;background:transparent;color:var(--ink);
    transition:border-color var(--t-col) var(--ease),color var(--t-col) var(--ease)}
  .b3:hover,.cbtn:hover,.fback:hover,.eqb:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
  /* variante, dans le configurateur et le formulaire : on enchaine les etapes, tout ce qui change au survol
     reagit en 160 ms (Enzo, 01/10/2026) : « Retour » et « Appeler » aussi ; sur les pages, la demi-seconde reste.
     Meme regle dans l'outil d'etiquettes de l'espace equipe (.eqb, Enzo, 02/10/2026) */
  .cbtn,.fback,.eqb{transition:border-color .16s var(--ease),color .16s var(--ease)}

  /* -- 1. bouton principal : plein orange -- */
  .go,.cbtn.main,.fsend,.eqb.main{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;
    justify-content:center;gap:12px;height:52px;padding:0 24px;font-family:inherit;font-size:17px;font-weight:600;
    line-height:1;white-space:nowrap;cursor:pointer;border:1px solid var(--accent);border-radius:3px;
    background:var(--accent);color:var(--on-orange)}
  /* sur les pages : au survol, les deux couleurs s'echangent en fondu lent (calque commun avec le bouton de devis) */
  .go{transition:color 1.1s var(--ease)}
  .go::before,.devis::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--on-orange);
    opacity:0;transition:opacity 1.1s var(--ease)}
  .go:hover{color:var(--accent)}
  .go:hover::before{opacity:1}
  .go span{transition:transform 1.1s var(--ease)}
  .go:hover span{transform:translateX(5px)}
  /* variante, dans le configurateur et le formulaire : on enchaine les etapes, tout ce qui change au survol
     reagit en 160 ms (Enzo, S2) : orange plus vif */
  .cbtn.main,.fsend,.eqb.main{transition:background-color .16s var(--ease),border-color .16s var(--ease)}
  .cbtn.main:hover,.fsend:hover,.eqb.main:hover{background:var(--accent-vif);border-color:var(--accent-vif);color:var(--on-orange)}
  /* variante : envoi en urgence (interrupteur « Commande urgente ») : sombre, contour et texte orange ;
     au survol, il se remplit d'orange, tout de suite lui aussi */
  .fsend.urg{background:var(--bg);border-color:var(--accent);color:var(--accent-ink)}
  .fsend.urg:hover{background:var(--accent);border-color:var(--accent);color:var(--on-orange)}
  /* variante : le bouton d'envoi garde sa largeur quand son libelle change (Continuer, Envoyer ma demande...) */
  .fsend{min-width:244px}

  /* -- desactive (principal et secondaire) : estompe, sans survol ; sans appui (micro.py) -- */
  .cbtn[disabled],.fsend[disabled],.fback[disabled],.eqb[disabled]{opacity:.35;cursor:default}
  .cbtn[disabled]:hover,.fback[disabled]:hover,.eqb[disabled]:hover{border-color:var(--line2);color:var(--ink)}
  .cbtn.main[disabled]:hover,.fsend[disabled]:hover,.eqb.main[disabled]:hover{background:var(--accent);border-color:var(--accent);color:var(--on-orange)}

  /* -- 3. pastille a contour : bandeaux des langues et des cookies, carte de la page Contact (« Retirer l'image », dans
        l'outil d'etiquettes, est devenu un bouton secondaire : Enzo, 04/10/2026) -- */
  .lbar button,.ckbt button,.mapfb .mbtn{min-height:44px;padding:8px 24px;border:1px solid var(--line2);border-radius:100px;
    background:none;cursor:pointer;font:inherit;font-size:15px;font-weight:600;line-height:1.2;color:var(--ink);
    transition:border-color .3s var(--ease),color .3s var(--ease)}
  .lbar button:hover,.lbar button:focus-visible,.ckbt button:hover,.ckbt button:focus-visible,
  .mapfb .mbtn:hover,.mapfb .mbtn:focus-visible{border-color:var(--accent-ink);
    color:var(--accent-ink)}
  /* au clavier, la regle commune (arrondi de 3 px) ne doit pas retirer aux pastilles leur forme */
  .devis:focus-visible,.lbar button:focus-visible,.ckbt button:focus-visible,.mapfb .mbtn:focus-visible{border-radius:100px}

  /* -- variante : la bande orange. Sur l'orange, un bouton orange disparaitrait : le principal y est sombre,
        le secondaire en contour sombre, et aucun ne se remplit au survol (remplir l'un le ferait ressembler
        a l'autre). Taille et texte de la famille. -- */
  .cta .d,.cta .o{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;
    font-size:17px;line-height:1;white-space:nowrap;border:1px solid var(--on-orange);border-radius:3px}
  .cta .d{background:var(--on-orange);color:var(--accent);font-weight:600}
  .cta .o{background:transparent;color:var(--on-orange);font-weight:500}
  /* le contour clavier reste visible sur l'orange */
  .cta .d:focus-visible,.cta .o:focus-visible{outline-color:var(--on-orange)}

  /* -- telephone : dans le configurateur et le formulaire, les boutons prennent toute la largeur
        (interactive.py), en 15 px avec 16 px de marge, pour que « Appeler le 01 64 26 70 57 » tienne a 320 px ;
        les pastilles gardent 44 px de haut, avec 16 px de marge pour laisser la place au texte des bandeaux -- */
  @media(max-width:700px){
    .cbtn,.cbtn.main,.fsend,.fback{padding:0 16px;font-size:15px}
    .cbtn,.cbtn.main{white-space:normal}
  }
  @media(max-width:767.98px){
    .lbar button,.ckbt button,.mapfb .mbtn{padding:8px 16px}
  }
  /* les chiffres quittent l'accroche et forment une reglette sous l'image */
  .hfigs{display:grid;grid-template-columns:repeat(3,1fr);padding:0 var(--gut);
    border-bottom:1px solid var(--line)}
  .hfigs span{min-width:0;padding:28px 24px 32px 24px;border-right:1px solid var(--line);
    font-size:15px;line-height:1.4;color:var(--mute)}
  .hfigs span:first-child{padding-left:0}
  .hfigs span:last-child{border-right:0;padding-right:0}
  .hfigs strong{display:block;margin-bottom:8px;font-family:var(--disp);font-size:30px;font-weight:600;
    letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}

  section{padding:var(--rhythm) var(--gut) 0}
  .kick{margin:0 0 24px;font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:.18em;color:var(--mute)}
  /* le titre qui suit un sur-titre se decale legerement : les deux se lisent
     comme un bloc, et le decrochage donne le rythme */
  .kick+.hbig,.kick+.mhead,.kick+.skt,.kick+.ilede,.kick+.subk{margin-left:32px}

  /* CE QUE NOUS FAISONS */
  .rows{border-top:1px solid var(--line)}
  .rows a{display:grid;grid-template-columns:1fr 1fr 60px;gap:48px;align-items:center;padding:40px 0;border-bottom:1px solid var(--line)}
  .rows a:hover{color:var(--accent-ink)}
  .rows .nm{font-family:var(--disp);font-size:76px;font-weight:600;letter-spacing:-.035em;line-height:1}
  .rows p{margin:0;font-size:17px;line-height:1.6;color:var(--dim)}
  .rows .ar{font-size:30px;text-align:right}

  /* ATOUTS */
  .atouts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .at{background:var(--bg);padding:40px 40px 32px;display:flex;flex-direction:column;min-height:230px}
  .at .top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--line)}
  .at .fig{font-family:var(--disp);font-size:46px;font-weight:600;line-height:1;color:var(--accent-ink);white-space:nowrap;letter-spacing:-.035em}
  .at .fig.long{letter-spacing:-.035em}
  .at .n{font-family:var(--disp);font-size:13px;color:var(--mute)}
  .at h3{margin:24px 0 0;font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
  .at p{margin:12px 0 0;font-size:17px;line-height:1.5;color:var(--dim)}

  /* DÉROULÉ */
  .proc{display:grid;grid-template-columns:340px 1fr;gap:80px}
  .proc .side{position:sticky;top:130px;align-self:start}
  /* l'etiquette est dans la colonne collante ; la frise descend d'autant pour rester face au titre */
  .proc .side .kick{margin:0 0 24px;font-size:13px;line-height:1.2;color:var(--mute)}
  .proc>.tl{margin-top:40px}
  .proc .side .t{font-family:var(--disp);font-size:36px;font-weight:600;letter-spacing:-.035em;line-height:1.1}
  .proc .side p{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--dim)}
  .tl{position:relative;padding-left:40px}
  .tl>span.rail{position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--line)}
  .st{position:relative;padding:0 0 40px}
  .st .dot{position:absolute;left:-40px;top:9px;width:15px;height:15px;border-radius:50%;background:var(--bg);border:1px solid var(--line2);display:block}
  .st .hd{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
  .st .num{font-family:var(--disp);font-size:15px;color:var(--mute)}
  .st .ti{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em}
  .st .tx{margin-top:8px;margin-left:32px;font-size:17px;line-height:1.6;max-width:62ch;color:var(--dim)}

  /* CONFIGURATEUR */
  .cfg{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
  .cfg .lab{font-size:12px;letter-spacing:.14em;color:var(--accent-ink);margin-bottom:24px}
  .cfg h2{margin:0;font-family:var(--disp);font-size:46px;font-weight:600;letter-spacing:-.035em;line-height:1.02;max-width:20ch}
  .cfg p{margin:24px 0 32px;font-size:20px;line-height:1.6;color:var(--dim);max-width:48ch}
  .cfg .row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  /* le bouton principal garde partout les memes metriques (voir micro) */
  .cfg .alt{font-size:17px;color:var(--dim)}
  /* P5 - halo diffus, respiration tres lente (18s) */
  .orb{position:relative;border-radius:3px}
  @keyframes halo{0%,100%{opacity:.58;transform:scale(.985)}50%{opacity:1;transform:scale(1.035)}}
  .orb::before{content:'';position:absolute;z-index:0;inset:0;border-radius:3px;pointer-events:none;
    box-shadow:0 20px 98px -34px rgba(var(--halo-rgb),var(--halo)),
               0 0 66px -24px rgba(var(--halo-rgb),calc(var(--halo)*.7));
    animation:halo 18s var(--ease) infinite;will-change:opacity,transform}
  @media (prefers-reduced-motion: reduce){
    .orb::before{animation:none;opacity:.82;transform:none}
  }
  .mock{position:relative;z-index:1;background:var(--panel);border-radius:3px;display:grid;grid-template-columns:200px 1fr;overflow:hidden;
    color:inherit;text-decoration:none;cursor:pointer;transition:transform .5s var(--ease-out)}
  .mock:hover{transform:translateY(-4px)}
  .mock:hover .foot .n{background:var(--accent-vif)}
  .mock .rail2{background:var(--bg);border-right:1px solid var(--line);padding:24px 16px}
  .mock .rh{display:flex;align-items:center;gap:8px;margin-bottom:24px}
  .mock .rh i{width:5px;height:5px;border-radius:50%;background:var(--accent);display:block}
  .mock .rh span{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--mute)}
  .mock .ri{display:flex;align-items:baseline;gap:8px;padding:8px 8px;border-radius:3px;color:var(--mute)}
  .mock .ri.on{background:rgba(var(--halo-rgb),.08);color:var(--accent-ink)}
  .mock .ri b{font-family:var(--disp);font-size:12px;font-weight:600;width:20px;flex-shrink:0}
  .mock .ri span{font-size:13px;line-height:1.3}
  .mock .body{padding:24px 24px 24px;min-height:300px;display:flex;flex-direction:column}
  .mock .sm{font-size:12px;color:var(--mute);margin-bottom:16px}
  .mock .q{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px;color:var(--ink)}
  .mock .hint{font-size:13px;line-height:1.5;color:var(--dim);margin-bottom:24px}
  .mock .qty{display:flex;align-items:baseline;gap:8px;margin-bottom:16px}
  .mock .qty b{font-family:var(--disp);font-size:36px;font-weight:600;letter-spacing:-.035em;color:var(--accent-ink);line-height:1}
  .mock .qty span{font-size:13px;color:var(--dim)}
  .mock .bar{height:4px;background:var(--line);border-radius:3px;margin-bottom:8px}
  .mock .bar i{display:block;width:34%;height:100%;background:var(--accent);border-radius:3px}
  .mock .ends{display:flex;justify-content:space-between;font-size:12px;color:var(--mute)}
  .mock .foot{margin-top:auto;padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line)}
  .mock .foot .p{border:1px solid var(--accent);border-radius:3px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--accent-ink)}
  .mock .foot .n{background:var(--accent);border-radius:3px;padding:12px 16px;font-size:13px;font-weight:600;color:var(--on-orange);transition:background .5s var(--ease)}

  /* MATÉRIEL */
  .mhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:48px;gap:20px;flex-wrap:wrap}
  .mhead .kick{margin:0}
  .mhead a{font-size:15px;font-weight:600;color:var(--accent-ink)}
  .mat{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;padding-bottom:16px}
  .mat>a{min-width:0;padding-bottom:16px}
  .mat .sl{aspect-ratio:4/5;background:var(--panel);border:1px solid var(--line);display:flex;align-items:flex-end;padding:16px}
  /* la cinquieme vignette a exactement la meme anatomie que les quatre autres :
     meme proportion, meme cadre, meme bloc de texte en dessous */
  .mat .sl.more{align-items:center;justify-content:center}
  .mat .sl.more span{font-family:var(--disp);font-size:30px;font-weight:500;letter-spacing:-.03em;
    color:var(--mute);transition:color var(--t-col,.5s) var(--ease)}
  .mat a:hover .sl.more{border-color:var(--accent-ink)}
  .mat a:hover .sl.more span{color:var(--accent-ink)}
  .mat .sl span{font-size:12px;letter-spacing:.1em;color:var(--mute)}
  .mat .nm{margin-top:16px;font-family:var(--disp);font-size:20px;font-weight:600}
  .mat .de{margin-top:4px;font-size:15px;color:var(--mute)}
  .mat a:hover .sl{border-color:var(--accent-ink)}

  /* SECTEURS */
  .sechead{padding:0 var(--gut) 40px}
  .sechead .big{font-family:var(--disp);font-size:46px;font-weight:600;letter-spacing:-.035em;line-height:1.02;max-width:26ch}
  .strip{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
  .strip a{position:relative;display:flex;align-items:flex-end;background:#161616;aspect-ratio:3/4;overflow:hidden}
  .strip a:hover{background:#271F18}
  .strip .ph{position:absolute;top:14px;left:14px;font-size:12px;letter-spacing:.1em;color:#8A8A86;line-height:1.5;
    background:none;border:0;padding:0;display:block;aspect-ratio:auto}
  .strip .grad{position:absolute;left:0;right:0;bottom:0;height:58%;pointer-events:none;
    background:linear-gradient(to top,#0D0D0DFA 0%,#0D0D0DF0 48%,#0D0D0D9E 76%,#0D0D0D00 100%)}
  .strip .in{position:relative;padding:24px 24px}
  .strip .n{font-family:var(--disp);font-size:13px;color:var(--accent);margin-bottom:8px}
  /* deux lignes reservees pour chaque titre : les cartouches s'alignent,
     qu'un secteur tienne sur un mot ou sur quatre */
  .strip .t{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.02;
    color:#F2F1EE;min-height:2.1em}
  /* deux lignes reservees pour chaque descriptif : les cinq cartouches
     s'alignent, quelle que soit la longueur du texte */
  .strip .d{margin-top:8px;font-size:13px;line-height:1.5;color:#A6A6A2;
    min-height:3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .strip a.last{flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:24px 24px}

  /* CONFIANCE */
  .trust{margin-top:var(--rhythm);padding:96px 0 96px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .trust .kick{padding:0 var(--gut);margin-bottom:24px}
  /* ---- BANDE DEFILANTE ----
     Les bords s'estompent au lieu d'etre coupes net : plus aucune vignette
     n'apparait ou ne disparait d'un coup contre l'arete du cadre. */
  .mq{position:relative;overflow:hidden;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 96px,#000 calc(100% - 96px),transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 96px,#000 calc(100% - 96px),transparent 100%)}
  @keyframes mqmove{from{transform:translateX(0)}to{transform:translateX(calc(var(--mqw,0px) * -1))}}
  .mqt{display:flex;width:max-content;will-change:transform}
  .mqs{display:flex;align-items:center;gap:40px;padding-right:40px;flex-shrink:0}
  .mqs>div{width:190px;height:92px;border:1px solid var(--line);background:var(--panel);
    display:flex;align-items:center;justify-content:center;padding:16px;flex-shrink:0;overflow:hidden}
  .mqs>div span{font-size:12px;letter-spacing:.04em;color:var(--mute);text-align:center;line-height:1.4}
  .mq:hover .mqt{animation-play-state:paused}
  /* animations reduites : noms immobiles, en grille */
  .mq.still{-webkit-mask-image:none;mask-image:none}
  .mq.still .mqt{display:block;width:auto}
  .mq.still .mqs{width:auto;flex-wrap:wrap;gap:16px;padding:0 var(--gut)}
  @media(max-width:700px){
    .mq.still .mqs{gap:8px}
    .mq.still .mqs>div{width:calc((100% - 16px) / 3);height:60px;padding:8px}
  }
  /* place prete pour les logos fournis plus tard */
  .mqs>div img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}


  /* QUI SOMMES-NOUS */
  .who{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:stretch}
  .who .ph{background:var(--panel);border:1px solid var(--line);display:flex;align-items:flex-end;padding:24px;min-height:460px;
    font-size:12px;letter-spacing:.1em;color:var(--mute);line-height:1.7}
  .who .tx{display:flex;flex-direction:column;justify-content:center}
  .who .big{font-family:var(--disp);font-size:60px;font-weight:600;letter-spacing:-.04em;line-height:1.02;max-width:18ch}
  .who p{margin:24px 0 0;font-size:20px;line-height:1.6;color:var(--dim);max-width:48ch}
  .who p+p{margin-top:16px}
  .who a{margin-top:32px;font-size:17px;font-weight:600;color:var(--accent-ink)}

  /* CTA */
  .cta{margin:var(--rhythm) var(--gut) 0;background:var(--accent);color:var(--on-orange);padding:72px 56px;border-radius:3px;
    display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
  .cta h2{margin:0 0 16px;font-family:var(--disp);font-size:46px;font-weight:600;letter-spacing:-.035em}
  .cta p{margin:0;font-size:17px;color:var(--on-orange-dim)}
  .cta .col{display:flex;flex-direction:column;gap:12px;flex-shrink:0}

  /* ---- PIED DE PAGE P4 : les coordonnees traitees comme un titre ----
     Les liens ne reprennent que ce qui n'est pas dans la navigation du haut :
     le blog et les pages legales. */
  footer{padding:var(--rhythm) var(--gut) 32px}
  .fg4{display:grid;grid-template-columns:1fr auto;gap:56px;padding-bottom:48px;border-bottom:1px solid var(--line)}
  .fbg{display:block;font-family:var(--disp);font-size:36px;font-weight:600;letter-spacing:-.035em;
    line-height:1.3;color:var(--ink)}
  .fbg:hover{color:var(--accent-ink)}
  .fg4 .fadr{display:inline-block;margin-top:24px;font-size:13px;line-height:1.7;color:var(--mute);
    text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px;
    transition:color .5s var(--ease),text-decoration-color .5s var(--ease)}
  .fg4 .fadr:hover{color:var(--accent-ink);text-decoration-color:var(--accent-ink)}
  .fg4 .hrs{margin-top:16px;font-size:13px;line-height:1.7;color:var(--mute)}
  /* la colonne de liens se cale sur le bord droit de la page */
  .fmin{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:12px;font-size:15px;padding-top:8px}
  .fmin a{color:var(--dim)}
  .fmin a:hover{color:var(--accent-ink)}
  .fend{display:flex;align-items:center;gap:24px;flex-wrap:wrap;
    padding:24px 0 80px;font-size:13px;color:var(--mute)}
  .fend .logo{height:26px;width:auto;flex-shrink:0}
  .fend .flogo{display:inline-flex;line-height:0}
  .fend .fup{margin-left:auto}
  .fend a{color:var(--mute)}
  .fend a:hover{color:var(--accent-ink)}

  @media(max-width:1200px){
    :root{--gut:40px;--rhythm:130px}
    .himg{min-height:calc(100svh - var(--hdr,86px) - var(--cal,0px) - var(--peek,64px))}
    .htxt{padding:0 var(--gut) 40px}
    .hero h1{font-size:46px;max-width:none}
    .hfigs{grid-template-columns:repeat(2,1fr)}
    .hfigs span:nth-child(2n){border-right:0;padding-right:0}
    .hfigs span:nth-child(2n+1){padding-left:0}
    .hfigs span:nth-child(-n+2){border-bottom:1px solid var(--line)}
    .rows a{grid-template-columns:1fr;gap:16px}
    .rows .nm{font-size:46px}
    .rows .ar{display:none}
    .proc{grid-template-columns:1fr;gap:40px}
    .proc .side{position:static}
    .proc>.tl{margin-top:0}
    .cfg,.who{grid-template-columns:1fr;gap:40px}
    .cfg h2{font-size:36px}
    .who .big{font-size:36px}
    .strip{grid-template-columns:repeat(3,1fr)}
    .strip .t{min-height:2.1em}
    .fg4{grid-template-columns:1fr}
    .fmin{align-items:flex-start;text-align:left}
  }
  @media(max-width:700px){
    :root{--gut:20px;--rhythm:88px}
    nav{display:none}
    .himg{--peek:44px;min-height:max(400px,calc(100svh - var(--hdr,86px) - var(--cal,0px) - var(--peek)))}
    .htxt{padding:0 var(--gut) 32px}
    .hero h1{font-size:30px;margin-bottom:24px}
    .hlab{margin-bottom:16px}
    .hacts{gap:24px}

    .atouts{grid-template-columns:1fr}
    .strip{grid-template-columns:1fr 1fr}
    .mat{grid-template-columns:repeat(3,1fr)}
    .mock{grid-template-columns:1fr}
    .mock .rail2{display:none}
    .cta{padding:40px 28px}
    .fg4{grid-template-columns:1fr;gap:40px}
    .fbg{font-size:24px}
    .fmin{align-items:flex-start;text-align:left}
    .cta h2{font-size:30px}
    .who .ph{min-height:300px}
  }

  /* bande orange, très petits téléphones (moins de 352 px, Enzo, 29/09/2026) : « Nous contacter par téléphone »
     ne tient plus sur une ligne dans la bande et sortait de la page à 320 px. Les deux boutons prennent toute
     la largeur de la bande, en 15 px ; la bande s'élargit un peu à l'intérieur. Au-delà, rien ne change. */
  @media(max-width:351.98px){
    .cta{padding:40px 24px}
    .cta .col{width:100%}
    .cta .d,.cta .o{padding:0 8px;font-size:15px}
  }

  /* points du carrousel des modèles phares : sur téléphone seulement (voir plus bas) */
  .matdots{display:none}

  /* ---- métiers, jusqu'à 1439 px (téléphones et tablettes le 27/09/2026, ordinateur à partir de 1201 px le
     28/09/2026) : la légende de la photo passe à la ligne dans sa vignette, chaque description s'affiche
     en entier. À 1440 px, les vignettes sont assez larges : rien ne change. ---- */
  @media(max-width:1439.98px){
    .strip .ph{right:14px;width:auto}
    .strip .d{display:block;-webkit-line-clamp:none;overflow:visible}
  }

  /* ---- TÉLÉPHONES ET TABLETTES, jusqu'à 900 px (Enzo, 27/09/2026) : aucun texte coupé ---- */
  @media(max-width:900px){
    /* vignettes étroites : les deux derniers mots peuvent se séparer (TEL_JS dans build.py) ;
       les lignes s'équilibrent pour éviter un mot seul quand la place le permet */
    .strip .t,.strip .d,.mat .nm,.mat .de{text-wrap:balance}
  }

  /* ---- RETOUCHES TÉLÉPHONE (Enzo, 27/09/2026) : moins de 768 px seulement ---- */
  @media(max-width:767.98px){
    /* accroche : « Louer du matériel » en pleine largeur reste le bouton principal ; dessous, « Acheter »
       et « Services » côte à côte, chacun sur la moitié de la largeur.
       Espacements un peu resserrés pour que le texte reste sous la légende de l'image jusqu'à 360 × 640 */
    .htxt{padding-bottom:24px}
    .hrow{row-gap:28px}
    .hacts{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;width:100%}
    .hacts .hlnk:not(.q){grid-column:1/-1}
    /* les trois chiffres les uns sous les autres, même taille et même alignement :
       les chiffres dans une colonne, les libellés alignés dans la suivante */
    .hfigs{grid-template-columns:auto 1fr;column-gap:24px}
    .hfigs span,.hfigs span:nth-child(n){display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:baseline;
      padding:16px 0 20px;border-right:0;border-bottom:1px solid var(--line)}
    .hfigs span:last-child{border-bottom:0}
    .hfigs strong{margin:0;white-space:nowrap}
    /* configurateur : sans l'aperçu dessiné, le bloc se détache sur le halo orange diffusé sous l'aperçu
       sur ordinateur, fixe (il ne bouge ni ne grossit), sans l'ombre qui entourait l'encart ;
       couleur et intensité du halo propres à chaque thème (accueil, Location et Vente).
       Le halo est une tache orange floutée posée derrière l'encart (même forme et même flou que l'ombre
       de l'ordinateur : 34 px en retrait, 20 px plus bas) ; l'encart, légèrement transparent (72 %), le laisse
       deviner au travers. Pas de flou « verre dépoli » : essayé le 27/09/2026, il faisait apparaître des anneaux
       dans le dégradé en thème clair, et derrière l'encart il n'y a que le halo, déjà flou. */
    .cfg .orb{display:none}
    .cfg{position:relative}
    .cfg::before{content:'';position:absolute;z-index:0;top:54px;right:34px;bottom:14px;left:34px;border-radius:3px;
      pointer-events:none;background:rgba(var(--halo-rgb),var(--halo));filter:blur(49px)}
    .cfg>div:first-child{position:relative;z-index:1;padding:32px 24px 32px;border-radius:3px;
      background:var(--panel);background:color-mix(in srgb,var(--panel) 72%,transparent)}
    /* modèles phares : un carrousel (maquette modeles-mobile.html, présentation 1). Une grande carte à la
       fois, la suivante dépasse sur le bord ; le doigt fait glisser, arrêt net sur chaque carte ; des points
       dessous indiquent la carte en cours ; la dernière carte, en pointillés, mène à la page Location */
    .mat{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
      scroll-padding-left:var(--gut);margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 8px;scrollbar-width:none}
    .mat::-webkit-scrollbar{display:none}
    .mat>a{flex:0 0 72%;scroll-snap-align:start;scroll-snap-stop:always}
    .mat>a .tec{margin-top:16px}
    .mat .nm{font-size:24px}
    .mat>a.plus{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:20px;border:1px dashed var(--line2)}
    .mat>a.plus .sl{display:none}
    .mat>a.plus .tec,.mat>a.plus .nm,.mat>a.plus .de{margin:0}
    .mat>a.plus .nm::after{content:" \2192"}
    .matdots{display:flex;justify-content:center;gap:8px;margin-top:16px}
    .matdots i{display:block;width:6px;height:6px;border-radius:3px;background:var(--line2);
      transition:width .3s var(--ease),background-color .3s var(--ease)}
    .matdots i.on{width:18px;background:var(--accent)}
    /* listes étroites : même règle que les vignettes ci-dessus (TEL_JS dans build.py) */
    .sname,.pgrid.teams .pt,.pgrid.teams .pd{text-wrap:balance}
    /* pied de page : « Haut de page » à gauche */
    .fend{flex-direction:column;align-items:flex-start}
    .fend .fup{margin-left:0}
  }
  @media(max-width:767.98px) and (prefers-reduced-motion:reduce){
    .matdots i{transition:none}
  }
  /* métiers, téléphones tenus droit : les vignettes seraient trop étroites à deux par ligne, elles passent
     à une par ligne ; les images, moins hautes (4:3), gardent la section courte */
  @media(max-width:559.98px){
    .strip{grid-template-columns:1fr}
    .strip a{aspect-ratio:4/3}
  }
  /* clients, sur téléphone : trois bandes fines qui défilent en sens alternés (gauche, droite, gauche).
     Si l'appareil demande de réduire les animations, la bande unique reste, immobile en grille. */
  .mqg{display:none}
  @media(max-width:767.98px) and (prefers-reduced-motion:no-preference){
    .trust>.mq{display:none}
    .mqg{display:grid;row-gap:8px}
    .mqg .mq{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
                     mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
    .mqg .mqs{gap:8px;padding-right:8px}
    .mqg .mqs>div{width:auto;height:40px;padding:0 16px}
    .mqg .mqs>div span{white-space:nowrap}
  }
  /* ---- grands écrans, au-delà de 1440 px (Enzo, 09/10/2026, A : l'en-tête et l'image s'arrêtaient avec la
     colonne, « ça fait boîte » sur un écran de 2560 px) : l'en-tête, les bandeaux (calendrier, langues, cookies)
     et l'image d'accueil vont d'un bord à l'autre de l'écran ; leur contenu reste aligné sur la colonne de 1440 px
     (72 px de marge), et le reste de la page garde sa largeur de lecture. 100vw compte aussi la barre de
     défilement : le peu qui passe dessous est coupé (overflow-x:clip), sans barre de défilement horizontale. Là où la
     place de la barre est réservée (outil d'étiquettes, `scrollbar-gutter`), 100vw ne la compte pas : la colonne y
     est plus étroite que 1440 px juste au-dessus de 1440, d'où les min() et max(), pour ne jamais rétrécir. ---- */
  @media(min-width:1441px){
    body{overflow-x:clip}
    #root>header{margin-inline:min(0px,calc(720px - 50vw));padding-inline:calc(var(--gut) + max(0px,calc(50vw - 720px)))}
    #root>.cal,#root .hero{margin-inline:min(0px,calc(720px - 50vw));--gut:calc(72px + max(0px,calc(50vw - 720px)))}
    .lbar,.ckb{width:100%;padding-inline:calc(72px + 50% - 720px)}
    /* le bloc de titre en haut des autres pages (Enzo, 09/10/2026, A) : son fond aussi ; son contenu, sa trame et
       son filet du bas, qui s'efface vers la droite, restent sur la colonne (règles de build.py, d'où #root) */
    #root .pghd{margin-inline:min(0px,calc(720px - 50vw));padding-inline:calc(var(--gut) + max(0px,calc(50vw - 720px)))}
    #root .pghd::after{left:max(0px,calc(50vw - 720px));right:max(0px,calc(50vw - 720px))}
  }
  /* d'une page a l'autre (Enzo, 01/10/2026, T2) : la transition integree aux navigateurs (View Transitions),
     sans bibliotheque. L'ancienne page s'efface en montant de 6 px, la nouvelle arrive en montant de 14 px,
     0,3 s en tout. L'en-tete, le pied de page et les bandeaux (cookies, langues) ne bougent pas : seul le contenu
     change. Un navigateur qui ne connait pas la fonction change simplement de page. */
  @view-transition{navigation:auto}
  /* selecteurs precis (enfants directs de #root) : la charte copie des elements du site avec leur entourage
     (bandeau des cookies...), et un nom ne doit servir qu'une fois dans la page */
  #root>header{view-transition-name:entete}
  #root>footer{view-transition-name:pied}
  #root>#ckb{view-transition-name:bandeau-cookies}
  #root>#lbar{view-transition-name:bandeau-langue}
  ::view-transition-old(root){animation:vtsort .3s var(--ease) both}
  ::view-transition-new(root){animation:vtentre .3s var(--ease) both}
  /* les deux images s'additionnent : le fond reste uni pendant le fondu (le navigateur le fait de lui-meme,
     mais ne le garde pas quand on remplace son animation) */
  ::view-transition-image-pair(root){isolation:isolate}
  ::view-transition-old(root),::view-transition-new(root){mix-blend-mode:plus-lighter}
  @keyframes vtsort{to{opacity:0;transform:translateY(-6px)}}
  @keyframes vtentre{from{opacity:0;transform:translateY(14px)}}
  /* l'en-tete et les bandeaux restent a leur place, sans fondu ; le pied de page ne se deplace jamais : il
     s'efface ou apparait sur place quand il change de place d'une page a l'autre */
  ::view-transition-group(entete),::view-transition-group(pied),
  ::view-transition-group(bandeau-cookies),::view-transition-group(bandeau-langue){animation:none}
  ::view-transition-old(entete),::view-transition-old(bandeau-cookies),::view-transition-old(bandeau-langue){display:none}
  ::view-transition-new(entete),::view-transition-new(bandeau-cookies),::view-transition-new(bandeau-langue){animation:none}
  ::view-transition-old(pied),::view-transition-new(pied){animation-duration:.3s}
  nav a.here{color:var(--accent-ink)}
  nav a.here::after{right:0}
  /* moins d'animations demande par l'appareil : un fondu, sans montee */
  @media (prefers-reduced-motion: reduce){
    ::view-transition-old(root){animation-name:vtsortdoux}
    ::view-transition-new(root){animation-name:vtentredoux}
    @keyframes vtsortdoux{to{opacity:0}}
    @keyframes vtentredoux{from{opacity:0}}
  }
  /* fil d'ariane simple, pour les pages sans en-tête complet */
  .bc{padding:96px var(--gut) 0;font-size:13px;color:var(--mute)}
  .bc a{color:var(--mute)}
  .bc span{padding:0 8px}
  .ihero{padding:40px var(--gut) 0}
  .ihero h1{font-family:var(--disp);font-size:92px;font-weight:600;letter-spacing:-.035em;line-height:1.02;margin:0 0 72px;max-width:17ch;text-wrap:balance}

  /* ---- EN-TÊTE DE PAGE ----
     Une trame de filets verticaux traverse tout le bloc, et les cases du
     sommaire se logent exactement entre ces filets : la trame n'est pas un
     décor, c'est la grille du sommaire prolongée vers le haut. */
  .pghd{position:relative;background:var(--panel);padding:0 var(--gut)}
  /* le filet du bas s'efface vers la droite, comme ceux de la trame */
  .pghd::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
    background:linear-gradient(to right,var(--line) 0%,var(--line) 58%,transparent 100%)}
  /* la trame ne court plus sur toute la hauteur : elle naît 72 px au-dessus
     du sommaire, en fondu, et descend jusqu'au bas du bloc */
  .phg{position:absolute;top:-72px;bottom:0;left:0;right:0;z-index:0;
    display:grid;grid-template-columns:repeat(var(--n,5),1fr);pointer-events:none}
  .phg i{position:relative}
  .phg i::after{content:'';position:absolute;top:0;bottom:0;right:0;width:1px;
    background:linear-gradient(to bottom,transparent 0%,
      color-mix(in srgb,var(--line) 55%,transparent) 44%,
      var(--line) 78%,var(--line) 100%)}
  .phg i:last-child::after{display:none}
  .phin{position:relative;z-index:1;padding:96px 0 80px}
  .phbc{font-size:13px;color:var(--mute);margin-bottom:64px}
  .phbc a{color:var(--mute)}
  .phbc span{padding:0 8px;color:var(--line2)}
  .pghd h1{font-family:var(--disp);font-size:76px;font-weight:600;letter-spacing:-.035em;
    line-height:1.02;margin:0 0 40px;max-width:17ch;text-wrap:balance}
  .pghd .ilede{font-size:20px;line-height:1.6;color:var(--dim);max-width:52ch;margin:0 0 48px}
  .pghd .hbtns{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  /* variante du bouton secondaire : les boutons sont des objets posés sur la page ;
     ils masquent la trame au lieu de la laisser traverser leur intérieur */
  .pghd .b3{background:var(--panel)}
  .phidx{position:relative;isolation:isolate;display:grid;gap:0;grid-template-columns:repeat(var(--n,5),1fr);
    font-weight:400;
    background-image:linear-gradient(to right,var(--line) 0%,var(--line) 58%,transparent 100%);
    background-size:100% 1px;background-repeat:no-repeat;background-position:0 0}
  .phidx a{position:relative;z-index:1;display:block;padding:32px 24px 32px 0;text-decoration:none;min-width:0}
  /* chaque case dont le bord gauche est un filet s'en écarte de 22 px ;
     la première n'a pas de filet à sa gauche et reste alignée sur le titre */
  .phidx a:not(:first-of-type){padding-left:24px}
  .phidx b{display:block;font-family:var(--disp);font-size:12px;font-weight:600;
    letter-spacing:.04em;color:var(--accent-ink);margin-bottom:12px}
  .phidx span{display:block;font-size:15px;line-height:1.3;color:var(--dim)}
  .kick{scroll-margin-top:124px}

  /* un chapo se repartit sur des lignes de longueur egale : jamais deux mots
     seuls sous une ligne pleine. */
  .ilede{font-size:20px;line-height:1.5;color:var(--dim);max-width:48ch;margin:0 0 40px;text-wrap:balance}
  /* boutons principal (.go) et secondaire (.b3) : familles 1 et 2 des boutons (_style.txt) */
  /* le rythme est défini une seule fois dans _style.txt */
  .hbig{font-family:var(--disp);font-size:46px;font-weight:600;letter-spacing:-.035em;line-height:1.02;max-width:26ch;text-wrap:balance}
  .hbig.xl{font-size:60px;letter-spacing:-.035em;line-height:1.02;max-width:18ch}
  .hbig.lg{font-size:60px;letter-spacing:-.035em;line-height:1.02;max-width:22ch}
  /* un titre que l'on veut tenir sur une seule ligne, tant que la largeur
     le permet : en dessous, il reprend un retour a la ligne equilibre */
  .hbig.une{max-width:none;white-space:nowrap}
  @media (max-width:1060px){.hbig.une{white-space:normal;text-wrap:balance}}
  .hrule{width:64px;height:2px;background:var(--accent);margin:32px 0}
  .shead{display:flex;align-items:baseline;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:40px}
  .shead .kick{margin:0}
  .shead .sn{font-size:15px;line-height:1.5;color:var(--dim);max-width:54ch;text-align:right}
  /* sous-titre de section : la forte interlettre était faite pour des
     capitales, pas pour du bas-de-casse. C'est un titre, pas une étiquette. */
  .subk{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;
    color:var(--ink);margin:64px 0 28px}
  .subk b{font-weight:600;font-size:15px;color:var(--accent-ink);margin-right:16px;
    vertical-align:2px;font-variant-numeric:tabular-nums}
  .note{font-size:15px;color:var(--mute);margin-top:24px}
  .cgrid{display:grid;grid-template-columns:repeat(var(--c),1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .card{background:var(--bg);padding:32px 32px 32px}
  .card h3{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0 0 12px}
  .card p{margin:0;font-size:17px;line-height:1.6;color:var(--dim)}
  .pgrid{display:grid;grid-template-columns:repeat(var(--c),1fr);gap:28px}
  /* Qui sommes-nous, l'equipe : six vignettes resserrees sur une seule ligne */
  .pgrid.staff{gap:16px}
  .pgrid.staff .ptxt{padding:16px 16px 16px}
  .pgrid.staff .pt{font-size:17px}
  .pgrid.staff .pd{font-size:15px;line-height:1.5}
  @media(min-width:1000px){.pgrid.staff{grid-template-columns:repeat(6,1fr)!important}}
  @media(min-width:701px) and (max-width:999px){.pgrid.staff{grid-template-columns:repeat(3,1fr)!important}}
  /* certifications et partenaires : trois carres fixes, centres */
  .certs{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
  .certs .ph{width:180px;aspect-ratio:1/1}
  .certn{text-align:center}
  .pc{display:block;border:1px solid var(--line)}
  .pc .ph{border:0;border-bottom:1px solid var(--line)}
  .pc .pt{margin:0 0 8px;padding:0}
  .pc>.pt{margin-top:0}
  .pc .ptxt{padding:24px 24px 24px}
  .ph{background:var(--panel);border:1px solid var(--line);display:flex;align-items:flex-end;padding:16px;
    width:100%;max-width:100%;min-width:0}
  /* les enfants de grille ne doivent jamais dépasser leur colonne */
  .tcols>*,.tcol>*,.srvmain>*,.srvrow>*,.avgrid>*,.avcol>*,.vband>*,.vitems>*,.sticky2>*,
  .pgrid>*,.mcells>*,.gal>*,.pshots>*,.faq2>*{min-width:0}
  .ph span{font-size:12px;letter-spacing:.1em;color:var(--mute);line-height:1.5}
  .pt{margin-top:20px;font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
  .pd{margin-top:8px;font-size:17px;line-height:1.6;color:var(--dim)}
  .pkrow{display:grid;grid-template-columns:repeat(var(--c,4),1fr);gap:28px}
  /* rangee serree : sept vignettes de front, texte reduit a proportion */
  .pkrow.serre{gap:16px}
  .pkrow.serre .ph{padding:8px}
  .pkrow.serre .pt{margin-top:12px;font-size:15px;line-height:1.2}
  .pkrow.serre .pd{margin-top:4px;font-size:12px;line-height:1.4}
  .vfam{margin-bottom:32px}
  .vfam:last-child{margin-bottom:0}
  .vft{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent-ink);
    padding-bottom:12px;border-bottom:1px solid var(--line2);margin-bottom:20px}
  .pkrow>*{min-width:0}
  /* une vignette sans fiche n'est pas cliquable : ni main, ni survol */
  .pk.mute{cursor:default}
  /* pages legales et plan du site */
  .lart{border-top:1px solid var(--line);padding:28px 0 32px;max-width:78ch}
  .lart:first-of-type{border-top:0;padding-top:0}
  .lat{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:16px}
  .lart p{margin:0 0 12px;font-size:17px;line-height:1.7;color:var(--dim)}
  .lart p:last-child{margin-bottom:0}
  .lart a{color:var(--accent-ink)}
  /* passages que seul Adelyo peut renseigner */
  .aedit{font-weight:600;color:var(--ink);background:rgba(var(--halo-rgb),.16);
    box-shadow:0 0 0 2px rgba(var(--halo-rgb),.16);border-radius:3px}
  .lavert{border-left:2px solid var(--accent);background:var(--panel);padding:24px 24px;max-width:78ch;
    font-size:15px;line-height:1.7;color:var(--dim)}
  .lavert b{color:var(--ink);font-weight:600}
  .lavert .aedit{padding:1px 4px}
  .lsi{background:var(--bg);display:flex;align-items:baseline;gap:16px;padding:20px 24px}
  .lsi b{font-family:var(--disp);font-size:13px;font-weight:600;color:var(--accent-ink);flex-shrink:0}
  .lsi span{font-size:17px;line-height:1.4}
  /* P3 — le plan du site en arborescence */
  .arb{margin-left:8px}
  .n1{position:relative;padding-left:32px;margin-bottom:32px}
  .n1:last-child{margin-bottom:0}
  .n1::before{content:'';position:absolute;left:0;top:12px;width:16px;height:1px;background:var(--accent)}
  .n1>a,.n1>span{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em;
    transition:color var(--t-col,.5s) var(--ease)}
  .n1>span{color:var(--mute)}
  .n1>a:hover{color:var(--accent-ink)}
  .n2{position:relative;margin:16px 0 0 24px;padding-left:24px;border-left:1px solid var(--line)}
  .n2 a{position:relative;display:block;padding:8px 0;font-size:17px;color:var(--dim);
    transition:color var(--t-col,.5s) var(--ease)}
  .n2 a::before{content:'';position:absolute;left:-26px;top:50%;width:16px;height:1px;background:var(--line)}
  .n2 a:hover{color:var(--accent-ink)}
  .pkrow .pt{font-size:20px;margin-top:16px}.pkrow .pd{font-size:15px;line-height:1.5;color:var(--dim);margin-top:8px}
  .llist{border-top:1px solid var(--line)}
  .lrow{display:grid;grid-template-columns:60px 300px 1fr;gap:32px;padding:32px 0;border-bottom:1px solid var(--line);align-items:baseline}
  .ln{font-family:var(--disp);font-size:13px;color:var(--accent-ink)}
  .lt{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em}
  .ld{font-size:17px;line-height:1.6;color:var(--dim)}
  .faq{border-top:1px solid var(--line)}
  .fq{border-bottom:1px solid var(--line)}
  .fq summary{list-style:none;cursor:pointer;padding:24px 0;font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em;
    display:flex;justify-content:space-between;gap:32px;transition:color .16s var(--ease)}
  .fq summary::-webkit-details-marker{display:none}
  .fq summary::after{content:'';flex-shrink:0;align-self:center;width:11px;height:11px;margin-bottom:4px;
    border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg);
    transition:transform .3s var(--ease),border-color .16s var(--ease)}
  .fq.opened summary{color:var(--accent-ink)}
  .fq.opened summary::after{transform:rotate(225deg);margin:4px 0 0;border-color:var(--accent-ink)}
  .fq p{margin:0 0 24px;font-size:17px;line-height:1.6;color:var(--dim);max-width:84ch}
  .pbtns{display:flex;flex-direction:column;gap:16px;margin-bottom:40px}
  .pb2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  /* variante des familles 1 et 2 : pleine largeur de la colonne, flèche au bout de la ligne ;
     taille, texte et états de la famille (Enzo, F1, 30/09/2026) */
  .pgo,.pb{display:flex;justify-content:space-between;gap:24px}
  .pb span{color:var(--mute)}
  .p2col{display:grid;grid-template-columns:repeat(2,1fr);gap:64px}
  .p2col p{margin:0;font-size:20px;line-height:1.6;color:var(--dim)}
  .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
  .bcard{display:block}
  .bcard .cmeta{margin-top:20px}
  .bcard .pt{margin-top:16px;font-size:24px;line-height:1.2}
  .bcard .pd{margin-top:8px;font-size:17px}
  .flede{margin:0 0 24px;font-size:20px;line-height:1.6;color:var(--dim);max-width:52ch}
  .atitle{font-family:var(--disp);font-size:76px;font-weight:600;line-height:1;letter-spacing:-.04em;margin:0 0 32px;max-width:19ch}
  .klab{font-size:12px;letter-spacing:.12em;color:var(--mute);margin-bottom:24px}
  .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .vals{display:grid;grid-template-columns:1fr 1fr;gap:56px 64px}
  .val i{display:block;width:26px;height:3px;background:var(--line2);margin-bottom:24px}
  .val:first-child i{background:var(--accent)}
  .val h3{margin:0 0 12px;font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em}
  .val p{margin:0;font-size:17px;line-height:1.6;color:var(--dim)}
  .mapwrap{position:relative;display:grid;border:1px solid var(--line);border-top:0;overflow:hidden;background:var(--panel)}
  /* la cale garde la proportion de la carte (21/8) ; sans la carte, l'encart grandit si son contenu
     le demande (telephone, tablette) : rien n'y est coupe */
  .mapwrap::before{content:'';grid-area:1/1;padding-top:38.095%}
  .mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s var(--ease)}
  .mapwrap.live iframe{opacity:1}
  .mapwrap.live .mapfb{position:absolute;inset:0;opacity:0;pointer-events:none}
  .mapfb{grid-area:1/1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
    text-align:center;padding:32px;transition:opacity .3s var(--ease);
    background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--accent) 12%,transparent) 0,transparent 46%),var(--panel)}
  .mapfb .mk{width:20px;height:20px;border-radius:50%;border:2px solid var(--accent);display:flex;align-items:center;justify-content:center}
  /* petit point orange : centre du repere de la carte et tete du rail du configurateur */
  .mapfb .mk span,.cfgrail .rh i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:block}
  .mapfb .ma{font-size:17px;line-height:1.6;color:var(--dim)}
  .mapfb .ma b{display:block;font-family:var(--disp);font-size:24px;font-weight:600;color:var(--ink);margin-bottom:8px}
  .mapfb .ml{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;font-size:15px;font-weight:600}
  .mapfb .ml a{color:var(--accent-ink)}
  /* le bouton « Afficher la carte » (.mapfb .mbtn) est une pastille à contour (famille 3 des boutons, _style.txt) */
  .mapfb .mcons{margin:-8px 0 0;font-size:13px;line-height:1.5;color:var(--mute)}
  .mapwrap.ok .mbtn,.mapwrap.ok .mcons,.mapwrap:not(.ok) .mnote2{display:none}
  .mnote2{position:absolute;left:0;right:0;bottom:14px;font-size:12px;letter-spacing:.04em;color:var(--mute);
    padding:0 24px;line-height:1.5}
  .coord{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
  .coord .cc{display:block;padding:32px 32px;border-right:1px solid var(--line);transition:background .16s var(--ease)}
  .coord .cc:last-child{border-right:0}
  .coord a.cc:hover{background:var(--panel)}
  .coord .k{font-size:12px;letter-spacing:.12em;color:var(--mute);margin-bottom:16px}
  .coord .k.accent{color:var(--accent-ink)}
  .coord .v{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;margin-bottom:8px}
  .coord .v.sm{font-size:24px;line-height:1.3}
  .coord .n{font-size:15px;color:var(--dim)}
  .rlist{border-top:1px solid var(--line)}
  .rr{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:baseline;padding:32px 0;border-bottom:1px solid var(--line)}
  .rn{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em}
  .rr p{margin:0;font-size:17px;line-height:1.6;color:var(--dim);max-width:76ch}
  /* ---- VENTE : bandes à colonne de titre ---- */
  .vbands{border-top:1px solid var(--line)}
  .vband{display:grid;grid-template-columns:400px 1fr;border-bottom:1px solid var(--line)}
  /* la bande grisee deborde jusqu'aux bords de la page : le texte garde
     l'alignement de la grille sans venir buter contre le bord du fond */
  .vband.alt{margin:0 calc(var(--gut) * -1);padding:0 var(--gut)}
  .vband.alt{background:var(--panel)}
  .vleft{padding:48px 56px 48px 0;border-right:1px solid var(--line)}
  .veye{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--accent-ink);margin-bottom:20px}
  .vt{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;margin-bottom:16px}
  .vleft p{margin:0;font-size:17px;line-height:1.6;color:var(--mute);max-width:38ch}
  .vitems{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;padding:48px 0 48px 56px}
  .bi{padding:20px 0;border-bottom:1px solid var(--line)}
  .bi h3{margin:0 0 8px;font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em}
  .bi p{margin:0;font-size:17px;line-height:1.5;color:var(--dim)}

  /* ---- frise horizontale ---- */
  .hsteps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;padding-top:32px}
  .hrail{position:absolute;left:0;right:0;top:7px;height:1px;background:var(--line)}
  .hs{position:relative}
  .hs .hd{position:absolute;top:-34px;left:0;width:15px;height:15px;border-radius:50%;background:var(--bg);
    border:1px solid var(--line2);display:block}
  .hs.on .hd{background:var(--accent);border-color:var(--accent)}
  .ht{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
  .hs.on .ht{color:var(--accent-ink)}
  .hs p{margin:0;font-size:15px;line-height:1.5;color:var(--dim)}

  /* ---- colonne de titre collante ---- */
  .sticky2{display:grid;grid-template-columns:1fr 1.35fr;gap:96px;align-items:start}
  .sk{position:sticky;top:120px}
  .skt{font-family:var(--disp);font-size:46px;font-weight:600;letter-spacing:-.035em;line-height:1.02;max-width:14ch}
  .rglist{border-top:1px solid var(--line)}
  .rgrow{display:grid;grid-template-columns:92px 1fr;gap:32px;padding:40px 0 40px;border-bottom:1px solid var(--line)}
  .rgn{font-family:var(--disp);font-size:36px;font-weight:700;line-height:1;color:var(--ink);
    transition:color var(--t-col) var(--ease)}
  /* le numero de la ligne en cours passe en orange, au fil du defilement (micro.py) */
  .rgrow.cur .rgn{color:var(--accent-ink)}
  .rgt{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;margin-bottom:16px}
  .rgrow p{margin:0;font-size:17px;line-height:1.6;color:var(--dim);max-width:70ch}

  /* ---- SERVICES : service principal ---- */
  .srvmain{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
  .srvp{margin:0 0 20px;font-size:20px;line-height:1.6;color:var(--dim);max-width:44ch}
  .srvlist{border-top:1px solid var(--line)}
  .srvrow{display:grid;grid-template-columns:104px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:center}
  .srvrow .ph{padding:8px;aspect-ratio:1/1}
  .srvt{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
  .srvrow p{margin:0;font-size:15px;line-height:1.5;color:var(--dim)}

  /* ---- SERVICES : les quatre temps ---- */
  .tframe{border:1px solid var(--line)}
  .thead{padding:64px 40px 48px}
  .tcols{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
  .tcol{border-right:1px solid var(--line)}
  .tcol:last-child{border-right:0}
  .tcol.hot{background:var(--panel)}
  .tband{padding:24px 32px;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--mute);
    border-bottom:1px solid var(--line)}
  .tcol.hot .tband{background:var(--accent);color:var(--on-orange)}
  .tcol .ph{border:0;border-bottom:1px solid var(--line)}
  .tbody{padding:24px 32px 32px}
  .tt2{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
  .tbody p{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--dim)}
  .tlist{border-left:2px solid var(--accent);padding-left:16px}
  .tli{font-size:15px;line-height:1.5;color:var(--mute);padding:8px 0}

  /* ---- SERVICES : ce qui va avec l'installation ---- */
  .avwrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .avgrid{display:grid;grid-template-columns:repeat(3,1fr)}
  .avcol{padding:40px 40px 48px;border-right:1px solid var(--line)}
  .avcol:first-child{padding-left:0}
  .avcol:last-child{border-right:0;padding-right:0}
  .avt{margin-top:24px;font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em}
  .avcol p{margin:12px 0 24px;font-size:17px;line-height:1.6;color:var(--mute)}
  .avlist{border-top:1px solid var(--line)}
  .avi{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--dim)}
  .avcol .avlist .avi:last-child{border-bottom:0}

  /* ---- FAQ à colonne de titre ---- */
  .faq2{display:grid;grid-template-columns:300px 1fr;gap:80px;align-items:start}
  .faq2 .fk2 .kick{margin:0}

  /* ---- bandeau « louer avant d'acheter » ---- */
  .beye{font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--accent-ink);margin-bottom:20px}
  .band p{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--dim);max-width:52ch}
  .shl{font-size:15px;font-weight:600;color:var(--accent-ink)}
  .band{border:1px solid var(--line2);border-radius:3px;padding:56px;display:grid;grid-template-columns:1fr 380px;gap:80px;align-items:center}
  /* E5 : « Louer avant d'acheter » est une photo et un texte, a angles vifs et
     sans bouton plein : elle ne peut plus se confondre avec la bande orange
     qui la suit immediatement en bas de la page Vente. */
  .vphoto{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
  .vphoto>*{min-width:0}
  .vphoto .ph{border:0;border-right:1px solid var(--line);aspect-ratio:16/10}
  .vphoto .vtx{padding:48px 48px;display:flex;flex-direction:column;justify-content:center}
  .vphoto .beye{margin-bottom:16px}
  .vphoto .vh{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
  .vphoto p{margin:16px 0 24px;font-size:17px;line-height:1.6;color:var(--dim);max-width:46ch}
  .vlien{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;
    font-size:17px;font-weight:600;color:var(--accent-ink)}
  .vlien span{transition:transform var(--t-btn,1.1s) var(--ease)}
  .vlien:hover span{transform:translateX(5px)}
  .mhead{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:48px;flex-wrap:wrap}
  .mhead a{font-size:15px;font-weight:600;color:var(--accent-ink)}
  .slist{border-top:1px solid var(--line)}
  /* la colonne des descriptions garde 620 px des qu'il y a la place (1440 px) et se resserre sinon :
     a 1201 px, « Cinéma & production audiovisuelle » faisait deborder la page de 10 px (28/09/2026) */
  .srow{display:grid;grid-template-columns:1fr minmax(0,620px) 40px;gap:40px;align-items:center;padding:24px 4px;border-bottom:1px solid var(--line)}
  .srow:hover{color:var(--accent-ink)}
  .sname{font-family:var(--disp);font-size:36px;font-weight:600;letter-spacing:-.035em}
  .sdesc{margin-top:8px;font-size:15px;line-height:1.5;color:var(--dim);max-width:56ch}
  .sph{height:132px;background:var(--panel);border:1px solid var(--line);display:flex;align-items:flex-end;padding:12px}
  .sph span{font-size:12px;letter-spacing:.1em;color:var(--mute)}
  .sar{color:var(--accent-ink);font-size:17px;text-align:right}
  .dots{font-family:var(--disp);font-size:36px;font-weight:500;line-height:1.4;letter-spacing:-.035em;max-width:70ch}
  .dots .sep{color:var(--accent-ink)}
  .wide{background:var(--panel);border:1px solid var(--line);aspect-ratio:21/9;display:flex;align-items:flex-end;padding:20px}
  .wide span{font-size:12px;letter-spacing:.1em;line-height:1.7;color:var(--mute)}
  /* deux, trois ou quatre familles selon ce que le secteur a à dire */
  .fams{display:grid;grid-template-columns:repeat(var(--nf,3),1fr);gap:48px}
  .fams[style*="--nf:4"]{gap:32px}
  .fams[style*="--nf:4"] .fi{font-size:min(22px,7.2cqi)}
  /* Securite : taille fixe demandee par Enzo (24/09/2026), la ligne longue sera raccourcie */
  #page-secteur-securite .fams .fi{font-size:22px}
  .fams[style*="--nf:4"] .famt{font-size:20px}
  .famt{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em;padding-bottom:16px;border-bottom:1px solid var(--accent)}
  /* la taille suit la largeur de la colonne (cqi) : chaque ligne reste sur une ligne */
  .fam{container-type:inline-size}
  .fi{font-family:var(--disp);font-size:min(24px,7.2cqi);font-weight:400;letter-spacing:-.022em;padding:16px 0;border-bottom:1px solid var(--line)}
  /* ---- T2 : paliers cliquables ---- */
  /* les onglets sont encadres comme la boite qu'ils commandent : le cadre
     court du haut des onglets au bas du tableau, d'un seul tenant */
  .pgtabs{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-bottom:0;margin-bottom:0}
  .pgt{position:relative;background:none;border:0;padding:16px 28px 16px;font-family:var(--disp);
    font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--mute);cursor:pointer;
    transition:color var(--t-col,.5s) var(--ease)}
  .pgt+.pgt{border-left:1px solid var(--line)}
  .pgt::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
    transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
  .pgt.on{color:var(--ink)}
  .pgt.on::after{transform:scaleX(1)}
  .pgt:hover{color:var(--ink)}
  .pgbox{border:1px solid var(--line)}
  .pgp{display:none}
  .pgp.on{display:block;animation:pgin .5s var(--ease) both}
  @keyframes pgin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .pgtop{display:grid;grid-template-columns:1.1fr 1fr}
  .pgtop>*{min-width:0}
  .pgtop .ph{border:0;border-right:1px solid var(--line)}
  .pgtx{padding:40px 40px 32px;display:flex;flex-direction:column;justify-content:center}
  .pgh{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-bottom:12px}
  .pgtx p{margin:0;font-size:17px;line-height:1.6;color:var(--dim);max-width:48ch}
  .pggrid{display:grid;grid-template-columns:repeat(var(--pc,5),1fr);gap:1px;background:var(--line);
    border-top:1px solid var(--line)}
  /* a six colonnes, la cellule respire moins : on resserre plutot que de deborder */
  .pggrid[style*="--pc:6"] .pgc,.pggrid[style*="--pc:7"] .pgc{padding:24px 16px 24px}
  .pggrid[style*="--pc:6"] .pgc .q,.pggrid[style*="--pc:7"] .pgc .q{font-size:24px}
  .pggrid[style*="--pc:6"] .pgc .d,.pggrid[style*="--pc:7"] .pgc .d{font-size:12px;line-height:1.4}
  .pggrid[style*="--pc:7"] .pgc{padding:24px 12px 24px}
  .pggrid[style*="--pc:7"] .pgc .k{font-size:12px;letter-spacing:.08em}
  .pggrid[style*="--pc:7"] .pgc .q{font-size:24px}
  .pgc{background:var(--bg);padding:24px 24px 28px;min-width:0}
  .pgc .k{font-size:12px;letter-spacing:.1em;color:var(--mute);margin-bottom:16px}
  .pgc .q{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1;margin-bottom:8px}
  .pgc .d{font-size:15px;line-height:1.5;color:var(--dim)}
  /* case sans objet : le materiel est compris ailleurs, ou il n'y a rien a faire */
  .pgc.off{background:var(--panel)}
  .pgc.off .k,.pgc.off .d{color:var(--mute)}
  .pgc.off .q{color:var(--mute)}

  /* ---- C2 : bandes alternees photo / texte ---- */
  .abands{border-top:1px solid var(--line)}
  .abr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
  .abr>*{min-width:0}
  .abr .ph{border:0;border-right:1px solid var(--line)}
  .abr:nth-child(even) .ph{order:2;border-right:0;border-left:1px solid var(--line)}
  .abt{padding:48px 48px;display:flex;flex-direction:column;justify-content:center}
  .abn{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--accent-ink);margin-bottom:16px}
  .abh{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-bottom:16px}
  .abt p{margin:0 0 24px;font-size:17px;line-height:1.6;color:var(--dim);max-width:46ch}
  .abl{display:flex;flex-wrap:wrap;gap:8px}
  .abl i{font-style:normal;font-size:13px;color:var(--mute);border:1px solid var(--line2);border-radius:3px;padding:8px 12px}

  .mtable{border-top:1px solid var(--line)}
  .mrow{display:grid;grid-template-columns:280px 1fr;border-bottom:1px solid var(--line)}
  .mleft{padding:32px 32px 32px;border-right:1px solid var(--line)}
  .mn{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--accent-ink)}
  .mt{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-top:8px}
  .mnote{font-size:15px;line-height:1.5;color:var(--mute);margin-top:12px}
  /* l'etiquette de technologie : une ligne, au-dessus du nom du poste */
  .tec{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.13em;
    color:var(--accent-ink);line-height:1.4}
  .pkrow .tec{margin-top:16px}
  .pkrow .tec+.pt{margin-top:4px}
  .pkrow.serre .tec{margin-top:12px;font-size:12px}
  .pkrow.serre .tec+.pt{margin-top:4px}
  .mc .tec{padding:0 24px;margin-top:20px}
  .mc .tec+.pt{margin-top:4px}
  .mcells.serre .tec{padding:0 8px;margin-top:16px;font-size:12px}
  .mcells.serre .tec+.pt{margin-top:4px}
  .mat .tec{margin-top:16px;font-size:12px}
  .mat .tec+.nm{margin-top:4px}
  .mcells{display:grid;grid-template-columns:repeat(var(--mc,4),1fr)}
  /* une rangée de sept vignettes : même anatomie, texte réduit à proportion */
  .mcells.serre .pt,.mcells.serre .pd{padding:0 8px}
  .mcells.serre .pt{font-size:13px;margin-top:16px;line-height:1.2;letter-spacing:-.014em}
  .mcells.serre .pd{font-size:12px;line-height:1.4;padding-bottom:24px}
  .mc{padding:0;border-left:1px solid var(--line)}
  .mc .ph{border:0}
  .mc .pt,.mc .pd{padding:0 24px}
  .mc .pt{margin-top:20px}
  .mc .pd{padding-bottom:32px}
  .mc .pt{font-size:17px;letter-spacing:-.018em}.mc .pd{font-size:15px;color:var(--mute)}
  /* ---- LA FRISE DES TROIS TEMPS ----
     Un rail horizontal, un point par etape, et le texte dessous : on suit
     la ligne de gauche a droite au lieu d'empiler trois grands blocs. */
  .frise{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:56px;padding-top:40px}
  .frail{position:absolute;left:0;right:0;top:8px;height:1px;background:var(--line);display:block}
  .fstep{position:relative;min-width:0}
  .fdot{position:absolute;top:-44px;left:0;width:17px;height:17px;border-radius:50%;
    background:var(--bg);border:1px solid var(--line2);display:block}
  /* le rail est un span : c'est first-of-type qui vise la premiere etape */
  .frise .fstep:first-of-type .fdot{background:var(--accent);border-color:var(--accent)}
  .fnum{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.12em;
    color:var(--accent-ink);margin-bottom:12px}
  .ftitre{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.02}
  .fsub{margin-top:8px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
  .fstep p{margin:20px 0 0;font-size:17px;line-height:1.6;color:var(--dim)}

  /* ---- LES AUTRES SECTEURS ----
     Six cases egales : les noms longs tiennent sur une ligne et la grille
     reste symetrique, ce que deux colonnes de gros titres ne permettaient plus. */
  .oth3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line)}
  .ocard{background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding:28px 32px;min-height:104px;transition:background .5s var(--ease)}
  .ocard:hover{background:var(--panel)}
  /* limitee aux cases : sans « .ocard », elle touchait aussi la page affichee (« page on »),
     et tout texte sans police propre passait en Archivo gras (corrige a la demande d'Enzo, 27/09/2026) */
  .ocard .on{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
  .oar{color:var(--accent-ink);font-size:17px;flex-shrink:0;
    transition:transform 1.1s var(--ease)}
  .ocard:hover .oar{transform:translateX(5px)}
  .others{display:grid;grid-template-columns:repeat(2,1fr);column-gap:56px}
  .orow{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:24px 0;border-top:1px solid var(--line);
    font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em}
  .others>.orow:last-child{grid-column:span 2;border-bottom:1px solid var(--line)}
  /* D2 : le nom du modele tient toute la largeur, comme le titre d'une page ;
     les deux colonnes ne commencent qu'ensuite, sous le filet. */
  .pdt{padding-top:48px}
  .pdhd{border-bottom:1px solid var(--line);padding-bottom:40px;margin-bottom:48px}
  .pdt h1{font-family:var(--disp);font-size:76px;font-weight:600;line-height:1;letter-spacing:-.035em;margin:16px 0 24px}
  .pdhd .ilede{max-width:62ch;margin:0}
  .pdbody{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
  .pdbody>*{min-width:0}
  .pshots{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
  .pshots .ph{aspect-ratio:1/1}
  .pcap{margin-top:12px;font-size:12px;letter-spacing:.06em;color:var(--mute)}
  .patout{border:1px solid var(--accent);border-radius:3px;padding:24px 24px;margin-bottom:32px}
  .patout .k{font-size:12px;letter-spacing:.12em;color:var(--accent-ink);margin-bottom:8px}
  .patout p{margin:0;font-size:20px;line-height:1.5}
  .plab{font-size:13px;letter-spacing:.14em;color:var(--accent-ink)}
  .spec{border-top:1px solid var(--line)}
  .sp{display:flex;justify-content:space-between;gap:32px;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px}
  .sp span{color:var(--mute)}
  .sp b{font-weight:500}
  .form{max-width:820px;display:flex;flex-direction:column;gap:20px}
  .f2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .form label{display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--mute)}
  .form input,.form select,.form textarea{background:var(--panel);border:1px solid var(--line2);border-radius:3px;padding:16px 16px;
    color:var(--ink);font-family:inherit;font-size:17px}
  .form .chk{flex-direction:row;align-items:center;gap:8px;font-size:15px;color:var(--ink)}
  .figband{background:var(--accent);color:var(--on-orange);padding:72px var(--gut);margin-top:var(--rhythm)}
  .figs3{display:grid;grid-template-columns:repeat(3,1fr);gap:72px}
  .figs3 b{display:block;font-family:var(--disp);font-size:92px;font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--on-orange)}
  .figs3 span{display:block;margin-top:16px;font-size:17px;line-height:1.4;color:var(--on-orange-dim);max-width:26ch}
  .story{max-width:68ch}
  .story p.lead{font-size:24px;line-height:1.5;letter-spacing:-.01em;color:var(--ink);margin-bottom:24px}
  .story p{font-size:20px;line-height:1.6;color:var(--dim);margin:0 0 20px}
  .reserved{border:1px dashed var(--line2);border-radius:3px;padding:32px 40px;font-size:12px;letter-spacing:.08em;line-height:1.7;color:var(--mute);max-width:70ch}
  .catwrap{padding:56px var(--gut) 0}
  .cats{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line)}
  .cat{border:1px solid var(--line2);border-radius:100px;padding:8px 16px;font-size:15px;color:var(--dim)}
  .cat.on{background:var(--accent);border-color:var(--accent);color:var(--on-orange);font-weight:500}
  .feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .ctag{display:inline-block;border:1px solid var(--accent-ink);border-radius:100px;padding:4px 16px;font-size:13px;color:var(--accent-ink)}
  .cmeta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .cdate{font-size:15px;color:var(--mute)}
  .ftitle{font-family:var(--disp);font-size:46px;font-weight:600;letter-spacing:-.035em;line-height:1.1;margin:16px 0 16px}
  .more{font-size:17px;font-weight:600;color:var(--accent-ink)}
  .artc{max-width:68ch}
  .ameta{font-size:15px;color:var(--mute)}
  .artc h3{font-family:var(--disp);font-size:36px;font-weight:600;letter-spacing:-.035em;line-height:1.1;margin:48px 0 20px}
  .artc p{font-size:20px;line-height:1.7;color:var(--dim);margin:0 0 28px}
  .artc p.lead{color:var(--ink)}
  .artc blockquote{margin:40px 0;padding-left:32px;border-left:2px solid var(--accent)}
  .artc blockquote p{font-family:var(--disp);font-size:30px;line-height:1.3;letter-spacing:-.03em;color:var(--ink);margin:0}
  .artc blockquote cite{display:block;margin-top:12px;font-style:normal;font-size:15px;color:var(--mute)}
  .awrap{display:grid;grid-template-columns:1fr 300px;gap:96px;align-items:start}
  .aside{position:sticky;top:120px;display:flex;flex-direction:column;gap:20px}
  .acard{border:1px solid var(--line);border-radius:3px}
  .acard .h{padding:16px 20px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.14em;color:var(--mute)}
  .acard .r{display:flex;justify-content:space-between;gap:16px;padding:16px 20px;font-size:15px;border-bottom:1px solid var(--line)}
  .acard .r:last-child{border-bottom:0}
  .acard .r span:first-child{color:var(--mute)}
  .aask{border:1px solid var(--line2);border-radius:3px;padding:24px 24px;font-size:15px;line-height:1.6;color:var(--dim)}
  .aask a{display:inline-block;margin-top:12px;font-weight:600;color:var(--accent-ink)}
  .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:40px}
  .tags span{border:1px solid var(--line2);border-radius:100px;padding:8px 16px;font-size:13px;color:var(--mute)}
  @media(max-width:1200px){
    .vband,.srvmain,.sticky2,.faq2,.band{grid-template-columns:1fr;gap:32px}
    .vphoto{grid-template-columns:1fr}
    .vphoto .ph{border-right:0;border-bottom:1px solid var(--line)}
    .vphoto .vtx{padding:32px 28px}
    .vleft{border-right:0;border-bottom:1px solid var(--line);padding:32px 0 32px}
    .vitems{padding:32px 0 32px;gap:0 32px}
    .sk{position:static}
    .skt{font-size:36px;max-width:none}
    .hsteps{grid-template-columns:repeat(2,1fr);gap:40px 28px}
    .tcols,.avgrid{grid-template-columns:repeat(2,1fr)}
    .avcol{padding:32px 24px 32px}
    .avcol:first-child,.avcol:last-child{padding-left:24px;padding-right:24px}
    .band{padding:32px}
    .pkrow{grid-template-columns:repeat(2,1fr)}
    .pkrow.serre{grid-template-columns:repeat(4,1fr)}
    .pb2{grid-template-columns:1fr}
    .awrap{grid-template-columns:1fr;gap:56px}
    .aside{position:static}
    .pdbody{grid-template-columns:1fr;gap:40px}
    .pdt h1{font-size:60px}
    .p2col,.vals,.rr{grid-template-columns:1fr;gap:32px}
    .coord{grid-template-columns:1fr}
    .coord .cc{border-right:0;border-bottom:1px solid var(--line)}
    .coord .cc:last-child{border-bottom:0}
    .figs3{gap:40px}
    .bgrid,.gal{grid-template-columns:repeat(2,1fr)}
    .hbig.xl{font-size:46px}
    .hbig.lg{font-size:36px}
    .atitle{font-size:46px}
    .shead .sn{text-align:left}
    .ihero h1{font-size:46px}
    .pghd h1{font-size:46px;max-width:none}
    .phin{padding:72px 0 56px}
    .phbc{margin-bottom:40px}
    .phg,.phidx{grid-template-columns:repeat(2,1fr)}
    .phidx a:not(:first-of-type){padding-left:0}
    .phidx a{padding-right:16px;border-bottom:1px solid var(--line)}
    .phg{top:-52px}
    .phidx a:nth-of-type(2n){padding-left:20px}
    .cgrid,.pgrid,.fams,.figs3,.others{grid-template-columns:repeat(2,1fr)!important}
    /* colonnes moitie moins larges : le texte descend pour rester sur une ligne */
    .fi{font-size:min(20px,7.2cqi)}
    .srow{grid-template-columns:1fr;gap:16px}
    .sph{height:150px}
    .mrow,.pdbody,.feat{grid-template-columns:1fr;gap:24px}
    /* la frise se redresse : le rail passe a gauche, les points s'y accrochent */
    .frise{grid-template-columns:1fr;gap:32px;padding-top:0;padding-left:32px}
    .frail{left:8px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
    .fdot{top:2px;left:-36px}
    .ftitre{font-size:24px}
    .oth3{grid-template-columns:repeat(2,1fr)}
    .pdt h1{font-size:36px}
    .pdhd{padding-bottom:24px;margin-bottom:32px}
    .abr{grid-template-columns:1fr}
    .pgtop{grid-template-columns:1fr}
    .pgtop .ph{border-right:0;border-bottom:1px solid var(--line)}
    .pgtx{padding:28px 24px 32px}
    .pgh{font-size:24px}
    .pggrid{grid-template-columns:repeat(2,1fr)}
    .pgt{padding:12px 16px 16px;font-size:17px}
    .abr .ph,.abr:nth-child(even) .ph{order:0;border:0;border-bottom:1px solid var(--line)}
    .abt{padding:32px 24px 32px}
    .abh{font-size:24px}
    .mcells{grid-template-columns:repeat(2,1fr)}
    .mc{border-left:0;border-top:1px solid var(--line)}
    .lrow{grid-template-columns:40px 1fr;gap:16px}
    .lrow .ld{grid-column:2}
  }
  @media(max-width:700px){
    .vitems,.hsteps,.tcols,.avgrid{grid-template-columns:1fr}
    .fi{font-size:min(20px,7.2cqi)}
    .oth3{grid-template-columns:1fr}
    .ocard{min-height:0;padding:24px 24px}
    .tcol,.avcol{border-right:0;border-bottom:1px solid var(--line)}
    .thead{padding:32px 24px 28px}
    .rgrow{grid-template-columns:1fr;gap:12px}
    .rgt{font-size:24px}
    .pkrow,.bgrid,.gal,.figs3{grid-template-columns:1fr}
    /* les quatre vues du produit restent sur une ligne : le bouton de location remonte */
    .pshots{grid-template-columns:repeat(4,1fr);gap:8px}
    /* equipes type en liste compacte, vignette photo a gauche */
    .pgrid.teams{gap:8px}
    .pgrid.teams .pc{display:grid;grid-template-columns:96px 1fr;align-items:center}
    .pgrid.teams .ph{border-bottom:0;border-right:1px solid var(--line)}
    .pgrid.teams .ph span{font-size:12px;letter-spacing:.06em}
    .pgrid.teams .ptxt{padding:16px 16px}
    .pgrid.teams .pt{font-size:20px}
    .pgrid.teams .pd{margin-top:4px;font-size:15px;line-height:1.4}
    .pkrow.serre{grid-template-columns:repeat(2,1fr)}
    .figs3 b{font-size:60px}
    .atitle{font-size:36px}
    .coord .v{font-size:24px}
    .rn{font-size:24px}
    .artc p{font-size:17px}
    .artc h3{font-size:24px}
    .artc blockquote p{font-size:24px}
    .ihero h1{font-size:36px}
    .pghd h1{font-size:36px}
    .phin{padding:48px 0 40px}
    .phbc{margin-bottom:32px}
    .phidx a{padding:24px 0 24px 0}
    .phg{display:none}
    .phidx{grid-template-columns:repeat(2,1fr)}
    .phidx a:not(:first-of-type),.phidx a:nth-of-type(2n){padding-left:0}
    .phidx a{padding-right:16px}
    .cgrid,.pgrid,.fams,.figs3,.others,.f2{grid-template-columns:1fr!important}
    .mcells{grid-template-columns:1fr}
    .hbig{font-size:30px}.dots{font-size:24px}
    .ftitle{font-size:30px}
  }
  /* petits telephones : « talkies-walkies professionnels » (Location, Vente) tient sur la ligne */
  @media(max-width:400px){
    .pghd h1{font-size:30px}
  }
  /* ================= CONFIGURATEUR EN POP-UP ================= */
  .ovl{position:fixed;inset:0;z-index:200;background:#000000CC;backdrop-filter:blur(3px);
    display:none;align-items:center;justify-content:center;padding:32px}
  .ovl.on{display:flex}
  .modal{position:relative;width:100%;max-width:1080px;max-height:calc(100vh - 64px);overflow:hidden;
    background:var(--bg);border:1px solid var(--line2);border-radius:3px;box-shadow:var(--ombre-3);
    display:grid;grid-template-columns:280px 1fr;grid-template-rows:minmax(0,1fr)}
  .modal>*{min-width:0;min-height:0}
  /* le configurateur garde exactement la meme taille de la premiere a la derniere etape
     (630 px, la hauteur de « Le lieu », demande d'Enzo : environ 600 px) : les boutons ne bougent jamais.
     Aucune barre de defilement : chaque etape tient dans cette hauteur. Seule exception, la recommandation
     depliee : la fenetre s'agrandit vers le bas, puis reprend sa taille (cfgTaille) */
  .modal{height:min(630px,calc(100vh - 64px));transition:height .3s var(--ease),margin-top .3s var(--ease)}
  .cfgbody,.cfgrail{scrollbar-width:none}
  .cfgbody::-webkit-scrollbar,.cfgrail::-webkit-scrollbar{display:none}
  @media(min-width:1101px){
    .ovl.on{align-items:flex-start}
    .modal{margin-top:max(0px,calc((100vh - 64px - 630px)/2))}
  }
  .mclose{position:absolute;top:20px;right:20px;z-index:5;width:38px;height:38px;border:1px solid var(--line2);
    border-radius:3px;background:var(--bg);color:var(--dim);cursor:pointer;font-size:17px;line-height:1;font-family:inherit}
  .mclose:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
  .cfgrail{background:var(--panel);border-right:1px solid var(--line);padding:32px 32px;display:flex;flex-direction:column;overflow:auto}
  .cfgrail .rh{display:flex;align-items:center;gap:8px;margin-bottom:24px}
  .cfgrail .rh span{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--mute)}
  .cfgrail .ri{display:flex;align-items:baseline;gap:12px;padding:12px 12px;border-radius:3px;color:var(--mute);font-size:15px}
  .cfgrail .ri.done{color:var(--dim)}
  .cfgrail .ri.on{background:rgba(var(--halo-rgb),.08);color:var(--accent-ink)}
  .cfgrail .ri b{font-family:var(--disp);font-size:12px;width:20px;flex-shrink:0}
  .cfgrail #cfgRail{flex:1}
  .skip{display:block;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
    font-size:13px;line-height:1.5;color:var(--mute);text-align:center}
  .skip:hover{color:var(--accent-ink)}
  .cfgbody{padding:48px 40px 0;display:flex;flex-direction:column;min-height:560px;overflow-y:auto;overflow-x:hidden}
  .prog{height:2px;background:var(--line);margin:0 56px 24px 0}
  .modal .cfgrail{padding-top:48px}
  .prog i{display:block;height:100%;background:var(--accent);transition:width .3s var(--ease)}
  .sm{font-size:12px;color:var(--mute);margin-bottom:16px}
  .cq{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;margin-bottom:8px}
  .chint{font-size:15px;line-height:1.5;color:var(--dim);margin-bottom:28px}
  .opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;min-width:0}
  .opts>*,.dates>*{min-width:0}
  /* interligne fixe : depuis la correction de la police (P2), les choix sont en IBM Plex Sans, plus haut
     que l'Archivo ; sans lui, l'etape « Le lieu » depassait de 2 px a 1100 x 800 */
  .opt{border:1px solid var(--line2);border-radius:3px;padding:16px 16px;font-size:17px;line-height:1.2;cursor:pointer;
    background:none;color:var(--ink);font-family:inherit;text-align:left;transition:border-color .16s,background .16s}
  .opt:hover{border-color:var(--accent-ink)}
  .opt.sel{border-color:var(--accent-ink);background:rgba(var(--halo-rgb),.08);color:var(--accent-ink);font-weight:500}
  .rng{display:block;width:100%;margin:0 0 16px;box-sizing:border-box;accent-color:var(--accent)}
  .ends{display:flex;justify-content:space-between;font-size:13px;color:var(--mute)}
  .cqty{display:flex;align-items:baseline;gap:16px;margin-bottom:24px}
  .cqty b{font-family:var(--disp);font-size:76px;font-weight:600;letter-spacing:-.04em;color:var(--accent-ink);line-height:1}
  .cqty span{font-size:17px;color:var(--dim)}
  .dates{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .fld{display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--dim)}
  .fld input,.fld select,.fld textarea{background:var(--panel);border:1px solid var(--line2);border-radius:3px;
    padding:16px 16px;color:var(--ink);font-family:inherit;font-size:17px;width:100%;max-width:100%;box-sizing:border-box}
  .req{color:var(--accent-ink)}
  /* boutons ancres en bas : « Retour » et « Continuer » (puis « Valider ») ne bougent jamais */
  .cfoot{margin-top:auto;padding:24px 0 32px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
    border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--bg);z-index:3}
  .cfr{display:flex;gap:12px;flex-wrap:nowrap;justify-content:flex-end}
  /* « Continuer » et « Valider » : bouton principal ; « Retour » et « Appeler » : bouton secondaire
     (familles 1 et 2 des boutons, _style.txt). Ici, seulement leur place dans le pied. */
  .cbtn{flex-shrink:0}
  .reco{border-left:2px solid var(--accent);padding:4px 0 4px 20px;margin-bottom:24px}
  .reco .rk{font-size:12px;letter-spacing:.12em;color:var(--accent-ink);margin-bottom:8px}
  .reco .rm{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
  .reco .rw{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--dim);max-width:62ch}
  .folds{border-top:1px solid var(--line)}
  .fold{border-bottom:1px solid var(--line)}
  .fold>button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;background:none;
    border:0;padding:0 16px;min-height:41px;cursor:pointer;font-family:inherit;color:var(--ink);transition:color .16s;text-align:left}
  .fold>button .fl{display:flex;align-items:baseline;gap:16px;min-width:0;flex:1}
  .fold>button .k{font-size:13px;color:var(--mute);width:140px;flex-shrink:0}
  .fold>button .v{font-size:15px;line-height:1.4;font-weight:500;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fold.on>button{color:var(--accent-ink)}
  /* un seul chevron pour tous les blocs depliables : le trait fin du menu deroulant du site,
     meme taille, meme bord droit (18 px) pour la recommandation et pour chaque ligne */
  .chev{position:relative;display:block;flex:none;width:22px;height:22px;color:var(--mute);
    transition:transform .3s var(--ease),color .16s}
  .chev::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-8px 0 0 -4px;box-sizing:border-box;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
  .fold>button:hover .chev{color:var(--accent-ink)}
  .fold.on .chev{color:var(--accent-ink);transform:rotate(180deg)}
  /* une ligne depliee prend la place des autres, qui reviennent quand on la replie : la fenetre garde sa taille */
  .folds.solo .fold:not(.on){display:none}
  .fbdy{padding:2px 16px 16px 174px;animation:fbin .3s var(--ease-out)}
  @keyframes fbin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .fsub{font-size:13px;color:var(--mute);margin-bottom:8px}
  .fhint{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--mute);max-width:62ch}
  .fauto{font-size:13px;color:var(--mute)}
  .chips{display:flex;flex-wrap:wrap;gap:8px;max-width:560px}
  .chip{border-radius:3px;padding:8px 16px;font-size:15px;cursor:pointer;font-family:inherit;white-space:nowrap;
    color:var(--ink);border:1px solid var(--line2);background:none;
    transition:background .16s,border-color .16s,color .16s}
  .chip:hover{border-color:var(--accent-ink)}
  .chip.on{color:var(--accent-ink);border-color:var(--accent-ink);background:rgba(var(--halo-rgb),.08)}
  .chip.fixe{cursor:default}
  .chip.off{cursor:default;opacity:.4}
  .chip.off:hover{border-color:var(--line2)}
  .qline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .qline+.qline{margin-top:8px}
  .qline .ql{font-size:13px;color:var(--mute);width:150px;flex-shrink:0}
  .qline b{font-family:var(--disp);font-size:20px;font-weight:600;min-width:44px;text-align:center}
  .qline .arw{color:var(--mute)}
  .sb{width:30px;height:30px;border-radius:3px;border:1px solid var(--line2);background:none;color:var(--ink);
    font-family:inherit;font-size:17px;line-height:1;cursor:pointer}
  .sb:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
  /* dans le configurateur et le formulaire, tout ce qui change au survol reagit en 160 ms, liens compris
     (Enzo, 01/10/2026) : la fermeture, les boutons + et -, le lien « Je sais deja ce qu'il me faut » et les liens
     du message du formulaire (la regle generale de micro.py leur donnait une demi-seconde) */
  .mclose,.sb{transition:border-color .16s var(--ease),color .16s var(--ease)}
  .skip,.fsent a{transition:color .16s var(--ease)}
  .din{background:var(--panel);border:1px solid var(--line2);border-radius:3px;padding:8px 12px;color:var(--ink);
    font-family:inherit;font-size:15px}
  /* texte libre du recapitulatif : meme grammaire que les autres champs */
  .clibre{display:block;max-width:560px}
  .clibre>span{display:block;font-size:13px;color:var(--mute);margin-bottom:8px}
  .clibre textarea{display:block;width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:3px;
    padding:12px 12px;color:var(--ink);font-family:inherit;font-size:15px;line-height:1.5;resize:vertical;min-height:104px}
  .clibre textarea::placeholder{color:var(--mute)}
  .clibre textarea:focus{border-color:var(--accent-ink);outline:none}
  .warn{border-left:2px solid var(--line2);padding:2px 0 2px 20px;margin:0 0 24px;font-size:15px;line-height:1.6;
    color:var(--dim);max-width:62ch}
  .warn b{color:var(--ink);font-weight:500}
  .lines{border-top:1px solid var(--line);margin-top:24px}
  .line{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
  .line .lb{font-size:17px}
  .line .lh{display:block;font-size:12px;color:var(--mute);margin-top:2px;max-width:44ch}
  .stp{display:flex;align-items:center;gap:12px;flex-shrink:0}
  .stp button{width:30px;height:30px;border:1px solid var(--line2);border-radius:3px;background:none;color:var(--dim);
    cursor:pointer;font-size:17px;line-height:1;font-family:inherit}
  .stp button:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
  .stp b{font-family:var(--disp);font-size:17px;min-width:44px;text-align:center}
  .sel2{background:var(--panel);border:1px solid var(--line2);border-radius:3px;padding:8px 12px;color:var(--ink);
    font-family:inherit;font-size:15px}
  .sumtxt{font-size:15px;line-height:1.7;color:var(--mute);margin:20px 0 0}
  .sumtxt b{color:var(--dim);font-weight:500}

  /* le lieu : quatre tailles empilees, sur toute la largeur, toutes exactement de la meme hauteur ;
     le titre a gauche, les exemples en plus petit a droite (dessous si la place manque) */
  .opts.lieux{grid-template-columns:1fr;grid-auto-rows:1fr;gap:8px}
  .opt.lieu{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 24px;padding:12px 16px}
  .opt.lieu .lexm{font-size:13px;line-height:1.4;color:var(--mute);font-weight:400}
  /* sous-sols : une option qui s'ajoute, separee des tailles, bordure en pointilles et « + » */
  .opts.niv{margin-top:20px;grid-template-columns:1fr}
  .opt.plus{border-style:dashed;padding:12px 16px}
  .opt.plus .pl{display:inline-block;width:18px;color:var(--accent-ink);font-weight:600}
  /* recapitulatif : la recommandation dans un bloc depliable, ferme par defaut, souligne d'orange */
  /* le filet orange est dessine a l'interieur : le chevron tombe exactement sur le bord droit des lignes (18 px) */
  .rbox{box-shadow:inset 0 0 0 1px var(--accent-ink);background:rgba(var(--halo-rgb),.08);border-radius:3px;margin-bottom:16px}
  .rhead{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:0 16px;min-height:46px;
    background:none;border:0;cursor:pointer;font-family:inherit;color:var(--ink);text-align:left}
  .rhead .rl{display:flex;align-items:baseline;gap:16px;min-width:0;flex:1}
  .rhead .rk{flex:none;font-size:12px;letter-spacing:.12em;color:var(--accent-ink)}
  .rhead .rm{min-width:0;font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
  .rhead .chev{color:var(--accent-ink)}
  .rbox.on .rhead .chev{transform:rotate(180deg)}
  .rdet{padding:0 16px 16px;animation:fbin .3s var(--ease-out)}
  /* ecran trop bas pour agrandir la fenetre : la recommandation depliee prend la place des lignes */
  .cfgbody.serre .folds{display:none}
  .rdet .rw{margin:0 0 8px;font-size:15px;line-height:1.6;color:var(--dim);max-width:62ch}
  .rdet .warn{margin:16px 0 0}
  /* « Autre » : un petit champ pour preciser le contexte */
  .cautre{display:block;margin-top:16px}
  .cautre input{display:block;width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:3px;
    padding:16px 16px;color:var(--ink);font-family:inherit;font-size:17px;box-sizing:border-box}
  .cautre input::placeholder{color:var(--mute)}
  .cautre input:focus{border-color:var(--accent-ink);outline:none}
  /* de l'air entre le dernier choix et la ligne du bas */
  .cfgbody>:nth-last-child(2){margin-bottom:32px}
  .cfgbody>.folds:nth-last-child(2){margin-bottom:16px}
  .cfgbody .chint.rc{margin-bottom:16px}
  /* ecran d'ordinateur peu haut : marges de la page et de la fenetre resserrees, pour que tout tienne */
  @media(min-width:1101px) and (max-height:720px){
    .ovl{padding:16px 32px}
    .modal{height:min(630px,calc(100vh - 32px));max-height:calc(100vh - 32px);margin-top:max(0px,calc((100vh - 32px - 630px)/2))}
    .cfgbody,.modal .cfgrail{padding-top:32px}
    .prog{margin-bottom:20px}
    .sm{margin-bottom:8px}
    .chint{margin-bottom:20px}
    .cfoot{padding:16px 0 24px}
  }
  /* fenetre plus etroite : le contenu d'une ligne depliee prend toute la largeur */
  @media(max-width:1250px){
    .fbdy{padding-left:16px}
  }
  /* icone calendrier des champs de date : claire en theme sombre, foncee en theme clair */
  .fld input[type=date],.din{color-scheme:dark}
  [data-theme="light"] .fld input[type=date],[data-theme="light"] .din{color-scheme:light}

  /* ================= COPIE DU NUMÉRO ================= */
  .toast{position:fixed;left:50%;bottom:30px;z-index:400;display:flex;align-items:center;gap:8px;
    transform:translate(-50%,14px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:3px;
    font-size:15px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);
    box-shadow:var(--ombre-2)}
  .toast.on{opacity:1;transform:translate(-50%,0)}
  .toast i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:block;flex-shrink:0}

  /* ================= BASCULE CLAIR / SOMBRE ================= */
  #root.theming,#root.theming *,body:has(>#root.theming){transition:background-color .3s var(--ease),color .3s var(--ease),
    border-color .3s var(--ease),fill .3s var(--ease),box-shadow .3s var(--ease) !important}
  #th svg{transition:transform .5s var(--ease),opacity .16s var(--ease)}
  #th.spin svg{transform:rotate(180deg) scale(.6);opacity:0}

  /* ================= FORMULAIRE DE DEVIS ================= */
  .fsec{padding:var(--rhythm,150px) 0 0}
  .forange{background:#F08A30;padding:72px var(--gut)}
  .forange h2{margin:0 0 16px;font-family:var(--disp);font-size:36px;font-weight:600;letter-spacing:-.035em;line-height:1.1;color:#0D0D0D}
  .forange .sub{margin:0 0 40px;font-size:20px;line-height:1.5;color:#4A3418;max-width:80ch}
  .fcard{background:var(--bg);border-radius:3px;padding:40px 48px;border:1px solid var(--bg);color:var(--ink);
    box-shadow:var(--ombre-2)}
  .ftogwrap{margin-bottom:32px}
  .ftog{position:relative;display:grid;grid-template-columns:1fr 1fr;width:420px;max-width:100%;background:var(--panel);
    border:1px solid var(--line2);border-radius:3px;padding:4px}
  .ftog .sl{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:var(--accent);border-radius:3px;
    display:block;z-index:1;transition:transform .5s var(--ease)}
  .ftog.dv .sl{transform:translateX(100%)}
  .ftog button{position:relative;z-index:2;background:none;border:0;border-radius:3px;padding:12px 8px;cursor:pointer;
    font-family:inherit;font-size:15px;font-weight:600;color:var(--mute);transition:color .5s var(--ease)}
  .ftog button.on{color:var(--on-orange)}
  .fmain{min-height:520px;display:flex;flex-direction:column;min-width:0}
  .fgrid2{display:grid;grid-template-columns:260px 1fr;flex:1;min-width:0}
  .fgrid2>*,.fg2>*,.fg3>*,.fone>*{min-width:0}
  .faside{border-right:1px solid var(--line2);padding-right:32px;display:flex;flex-direction:column}
  .fk{font-size:12px;letter-spacing:.14em;color:var(--mute);margin-bottom:28px}
  .faside .items{display:flex;flex-direction:column;gap:4px}
  .faside button{display:flex;align-items:baseline;gap:12px;width:100%;background:none;border:0;border-radius:3px;
    padding:12px 12px;cursor:pointer;font-family:inherit;color:var(--mute);transition:background .16s,color .16s;text-align:left}
  .faside button.done{color:var(--dim)}
  .faside button.on{background:rgba(var(--halo-rgb),.08);color:var(--accent-ink)}
  .faside button span:first-child{font-family:var(--disp);font-size:12px;width:20px;flex-shrink:0}
  .faside button span:last-child{font-size:15px;line-height:1.3}
  .fright{padding-left:40px;display:flex;flex-direction:column}
  .fst{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:24px}
  .fzone{min-height:336px;display:flex;flex-direction:column;justify-content:center;gap:16px}
  .fzone.tall{height:auto;min-height:336px;justify-content:flex-start}
  .fmain.msg{display:flex;flex-direction:column;gap:16px}
  .flab.grow{flex:1;min-height:0}
  .flab.grow textarea{flex:1;min-height:132px;resize:vertical;line-height:1.5}
  .fg2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
  .fone{display:grid;grid-template-columns:1fr;gap:16px}
  .flab{display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--dim)}
  .flab input,.flab select,.flab textarea{background:var(--panel);border:1px solid var(--line2);border-radius:3px;
    padding:16px 16px;color:var(--ink);font-family:inherit;font-size:17px;width:100%;max-width:100%;box-sizing:border-box}
  .flab input::placeholder,.flab textarea::placeholder{color:var(--mute)}
  .fttl{font-size:15px;color:var(--dim);margin-bottom:12px}

  /* menu deroulant du formulaire, dans le style du site (remplace la liste du systeme) */
  .fsel{position:relative}
  .fselb{position:relative;display:flex;align-items:center;width:100%;min-width:0;background:var(--panel);border:1px solid var(--line2);
    border-radius:3px;height:52px;padding:0 56px 0 16px;color:var(--ink);font-family:inherit;font-size:17px;line-height:1.3;
    text-align:left;cursor:pointer;transition:border-color .16s}
  .fselb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fselb:hover,.fsel.open .fselb{border-color:var(--accent-ink)}
  .fselb i{position:absolute;right:24px;top:50%;width:8px;height:8px;margin-top:-8px;border-right:1.5px solid var(--dim);
    border-bottom:1.5px solid var(--dim);transform:rotate(45deg);transition:transform .3s var(--ease),margin .3s}
  .fsel.open .fselb i{transform:rotate(-135deg);margin-top:-2px;border-color:var(--accent-ink)}
  .fsell{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;padding:8px;background:var(--panel);
    border:1px solid var(--line2);border-radius:3px;box-shadow:var(--ombre-2);
    animation:fselin .3s var(--ease-out)}
  .fsell[hidden]{display:none}
  @keyframes fselin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .fsell button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:0;
    border-radius:3px;padding:12px 12px;font-family:inherit;font-size:17px;line-height:1.3;color:var(--ink);text-align:left;
    cursor:pointer;transition:background .16s,color .16s}
  .fsell button:hover,.fsell button:focus-visible{background:var(--line);color:var(--ink);outline:none}
  .fsell button[aria-selected="true"]{color:var(--accent-ink)}
  /* messages d'erreur, sous le champ concerne */
  .flab input.bad,.flab textarea.bad{border-color:var(--accent-ink)}
  .ferr{font-size:13px;line-height:1.4;color:var(--accent-ink)}
  /* les champs d'une ligne ont tous exactement la meme hauteur que le menu deroulant et les boutons */
  .flab input{height:52px}
  .fsent a{color:var(--accent-ink)}
  /* sans JavaScript, a la place du formulaire (Enzo, 29/09/2026) */
  .fsans{margin:0;font-size:20px;line-height:1.5;color:var(--ink)}
  .fsans a{color:var(--accent-ink)}

  /* le formulaire garde toujours son fond noir : icone calendrier claire dans les deux themes */
  .flab input[type=date]{color-scheme:dark}
  /* choix avec une precision en petit dessous */
  .frad label.fprec,.fchk label.fprec{padding-top:12px;padding-bottom:12px}
  .fsl{display:flex;flex-direction:column;gap:2px}
  .fsl small{font-size:13px;line-height:1.4;color:var(--mute)}
  .frad label.on .fsl small,.fchk label.on .fsl small{color:var(--dim)}
  /* arrivee depuis le configurateur : message de confirmation */
  .fnote{margin:0 0 24px;border:1px solid rgba(var(--halo-rgb),.33);background:rgba(var(--halo-rgb),.08);border-radius:3px;padding:16px 20px;
    font-size:15px;line-height:1.6;color:var(--ink)}
  .frad{display:grid;gap:8px;align-content:start}
  .frad label,.fchk label{display:flex;align-items:center;gap:8px;border-radius:3px;padding:0 16px;font-size:15px;
    line-height:1.3;min-height:47px;box-sizing:border-box;
    cursor:pointer;color:var(--ink);border:1px solid var(--line2);background:transparent;
    transition:background .16s,border-color .16s,color .16s}
  .frad label.on,.fchk label.on{color:var(--accent-ink);border-color:var(--accent-ink);background:rgba(var(--halo-rgb),.08)}
  .frad input,.fchk input{accent-color:var(--accent);width:16px;height:16px;margin:0;flex-shrink:0;cursor:pointer}
  .fchk{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
  .fg2.top{align-items:start;align-content:center;gap:32px}
  .frcp{border-top:1px solid var(--line2);width:100%}
  .frl{display:grid;grid-template-columns:240px 1fr auto;gap:24px;align-items:baseline;padding:12px 0;
    border-bottom:1px solid var(--line)}
  .frl .k{color:var(--mute);font-size:15px}
  .frl .v{color:var(--ink);font-size:17px}
  .frl button{background:none;border:0;color:var(--accent-ink);font-family:inherit;font-size:15px;cursor:pointer;padding:0}
  .furg{display:flex;align-items:center;gap:12px;height:52px;padding:0 20px;box-sizing:border-box;border-radius:3px;
    border:1px solid var(--line2);background:transparent;color:var(--ink);font-family:inherit;font-size:17px;font-weight:600;
    cursor:pointer;white-space:nowrap;transition:background .16s,border-color .16s,color .16s}
  .furg.on{color:var(--accent-ink);border-color:var(--accent-ink);background:rgba(var(--halo-rgb),.08)}
  .fbox{display:flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:3px;flex-shrink:0;
    font-size:12px;line-height:1;border:1px solid var(--line2);background:transparent;color:transparent;transition:all .16s}
  .fbox.on{border-color:var(--accent-ink);background:var(--accent);color:var(--on-orange)}
  .ffoot{margin-top:auto;padding-top:24px;border-top:1px solid var(--line2);display:flex;align-items:center;gap:24px}
  .ffoot.spread{justify-content:space-between}
  .fright2{margin-left:auto;display:flex;align-items:center;gap:24px}
  /* « Retour » (.fback) : bouton secondaire ; envoi (.fsend) : bouton principal (familles 1 et 2 des boutons, _style.txt) */
  .fsent{margin-top:24px;border:1px solid rgba(var(--halo-rgb),.33);background:rgba(var(--halo-rgb),.08);border-radius:3px;padding:16px 24px;
    font-size:15px;line-height:1.6;color:var(--ink)}

  @media(max-width:1100px){
    .modal{grid-template-columns:1fr;grid-template-rows:auto;max-height:92vh;overflow:auto}
    /* meme regle sur tablette et telephone : hauteur fixe, seul le contenu defile */
    .modal{height:92vh;height:92svh;max-height:92svh;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
    .cfgrail{overflow:hidden}
    .cfgbody{overflow-y:auto;padding-top:24px}
    .cfgbody .chint.rc{margin-bottom:16px}
    .mclose{position:fixed;top:22px;right:22px}
    .cfgrail{border-right:0;border-bottom:1px solid var(--line)}
    .cfgrail .items{display:flex;gap:8px;overflow-x:auto;max-width:100%;scrollbar-width:none}
    .cfgrail .items::-webkit-scrollbar{display:none}
    .cfgrail{min-width:0;max-width:100%;overflow:hidden}
    .cfgrail .ri{white-space:nowrap}
    .skip{margin-top:8px;padding-top:0}
    .skip br{display:none}
    .modal .cfgrail{padding:20px 24px 16px}
    .cfgrail .rh{margin-bottom:12px}
    .fgrid2{grid-template-columns:1fr}
    .faside{border-right:0;border-bottom:1px solid var(--line2);padding:0 0 24px;margin-bottom:24px;
      min-width:0;max-width:100%;overflow:hidden}
    .faside .items{flex-direction:row;flex-wrap:wrap;gap:8px;max-width:100%}
    .faside .items::-webkit-scrollbar{display:none}
    .faside button{width:auto;white-space:nowrap}
    .fright{padding-left:0}
    .fg3{grid-template-columns:1fr 1fr}
  }
  @media(max-width:700px){
    .ovl{padding:12px}
    .cqty b{font-size:46px}
    .cfgbody{padding:32px 24px 0}
    .cq{font-size:24px}
    .opts,.dates,.fg2,.fg3{grid-template-columns:1fr}
    .forange{padding:48px 20px}
    .forange h2{font-size:30px}
    .fcard{padding:24px 24px}
    .ftog{width:100%}
    .cfoot{flex-direction:column-reverse;align-items:stretch;gap:8px}
    .cfoot>div{flex-direction:column;width:100%;gap:8px}
    .cbtn{width:100%;min-width:0;flex-shrink:1}
    .cfgbody{min-height:0}
    .fold>button{gap:12px;padding:8px 16px}
    .fold>button .fl{flex-direction:column;align-items:flex-start;gap:2px}
    .fold>button .k{width:auto}
    .rhead{padding:8px 16px}
    .fold>button .v{white-space:normal}
    .rhead .rl{flex-direction:column;gap:2px}
    .fbdy{padding:2px 16px 16px}
    .qline .ql{width:100%}
    .reco .rm{font-size:24px}
    .fsend{min-width:0;flex:1}
    .ffoot,.cfoot{gap:8px}
    .fzone,.fzone.tall{height:auto;min-height:0}
    .fchk{grid-template-columns:1fr}
    .fg2.top{gap:24px}
    .ffoot{flex-wrap:wrap}
    .fright2{width:100%;margin-left:0;gap:8px}
    .furg{padding:0 16px;font-size:15px}
    .frl{grid-template-columns:1fr auto;gap:8px 16px}
    .frl .v{grid-column:1;font-size:15px}
    .fsend{min-width:0;width:100%}
    .ffoot{flex-direction:column-reverse;align-items:stretch}
  }
  /* ============ MINUTAGE ============
     Courbe adoucie aux deux extrémités : le mouvement démarre et s'arrête en douceur. */
  :root{
    --ease:cubic-bezier(.4,0,.2,1);
    --ease-out:cubic-bezier(.22,.61,.36,1);
    --t-col:.5s;    /* couleurs et bordures */
    --t-fill:.85s;  /* déplacements, remplissages et balayages */
  }

  a,button,summary,.card,.pc,.srow,.orow,.fi,.sp,.cc,.rr,.cat,.pk,.bcard,.st,.lrow,.mc,.val{
    transition:color var(--t-col) var(--ease), background-color var(--t-col) var(--ease),
               border-color var(--t-col) var(--ease), transform var(--t-fill) var(--ease),
               box-shadow var(--t-fill) var(--ease), opacity var(--t-col) var(--ease)}

  /* ============ A1 — NAVIGATION : SOULIGNEMENT QUI POUSSE ============
     Le trait pousse de gauche a droite par son bord droit, pas par un agrandissement (Enzo, 07/10/2026) : agrandi, il
     paraissait plus epais pendant le mouvement qu'a l'arrivee ; il garde maintenant la meme epaisseur du debut a la
     fin, 2 px (Enzo, 08/10/2026, reponse B : un peu plus epais qu'avant, comme pendant le mouvement) */
  header nav a{position:relative}
  header nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--accent);
    transition:right var(--t-fill) var(--ease)}
  header nav a:hover::after{right:0}
  header .tel:hover{color:var(--accent-ink)}

  /* les trois familles de boutons (principal, secondaire, pastille a contour) : _style.txt */

  /* les boutons de l'accroche et du bandeau final : B2 seul, aucun soulevement */

  /* ============ I2 — APPUI LÉGER ============ */
  .go:active,.b3:active,.devis:active,.cbtn:active,.fsend:active,.fback:active,.eqb:active,.furg:active,.chip:active,.cat:active,
  .cta .d:active,.cta .o:active,.lbar button:active,.ckbt button:active,.mapfb .mbtn:active{transform:scale(.985)}
  /* un bouton desactive ne s'enfonce pas */
  .cbtn[disabled]:active,.fsend[disabled]:active,.fback[disabled]:active,.eqb[disabled]:active{transform:none}
  .go,.b3,.devis,.cbtn,.fsend,.fback,.eqb,.cat,.chip{will-change:transform}


  /* ============ R1 — LIGNES : LE TEXTE SEUL ============
     Choix valide : au survol d'une ligne, seuls le titre et la fleche passent a
     l'orange. Aucun filet, aucun voile, aucune indentation, aucun deplacement.
     Ce traitement s'applique a TOUTES les listes de lignes du site. */
  .rows a,.srow,.orow,.fi,.phidx a{position:relative;transition:color var(--t-col) var(--ease)}
  .phidx a span{transition:color var(--t-col) var(--ease)}
  .rows a:hover .nm,.srow:hover .sname,.orow:hover,.fi:hover,.phidx a:hover span{color:var(--accent-ink)}
  /* la fleche change de couleur, sans jamais changer de place */
  .rows a .ar,.srow .sar{transition:color var(--t-col) var(--ease)}
  .rows a:hover .ar,.srow:hover .sar{color:var(--accent-ink)}

  /* ============ E3 — VIGNETTES : VOILE ORANGE ET FILET BAS ============ */
  .pk,.bcard,.pc,.mat a,.feat{position:relative;overflow:hidden}
  .pk .ph,.bcard .ph,.pc .ph,.mat a .sl,.feat .ph{position:relative;overflow:hidden}
  .pk .ph::after,.bcard .ph::after,.pc .ph::after,.mat a .sl::after,.feat .ph::after{
    content:'';position:absolute;inset:0;background:var(--accent);opacity:0;
    transition:opacity var(--t-fill) var(--ease);pointer-events:none}
  .pk,.bcard,.mat a{padding-bottom:16px}
  .pk::after,.bcard::after,.pc::after,.mat a::after,.feat::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
    transform:scaleX(0);transform-origin:left;transition:transform var(--t-fill) var(--ease)}
  .pk:hover .ph::after,.bcard:hover .ph::after,.pc:hover .ph::after,
  .mat a:hover .sl::after,.feat:hover .ph::after{opacity:.14}
  .pk:hover::after,.bcard:hover::after,.pc:hover::after,.mat a:hover::after,.feat:hover::after{transform:scaleX(1)}
  .pk:hover .pt,.bcard:hover .pt,.pc:hover .pt,.mat a:hover .nm,.feat:hover .ftitle{color:var(--accent-ink)}
  /* les vignettes sans fiche ne reagissent pas : elles ne menent nulle part */
  .pk.mute::after{display:none}
  .pk.mute:hover .ph::after{opacity:0}
  .pk.mute:hover .pt{color:var(--ink)}

  /* la bande de secteurs garde son propre mouvement */
  .strip a .ph{transition:transform 4.5s var(--ease-out)}
  .strip a:hover .ph{transform:scale(1.04)}
  .strip a .t{transition:color var(--t-col) var(--ease)}
  .strip a:hover .t{color:var(--accent-ink)}

  .more{position:relative;display:inline-block}
  .more::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
    transform:scaleX(0);transform-origin:left;transition:transform var(--t-fill) var(--ease)}
  .feat:hover .more::after,a:hover>.more::after{transform:scaleX(1)}

  /* ============ DÉROULÉ : LES POINTS S'ALLUMENT AU DÉFILEMENT ============
     Chaque étape allume sa pastille en orange quand elle passe aux trois
     cinquièmes de l'écran, et l'éteint quand on remonte (accueil et Location).
     La frise de la page Vente reste blanche, survol compris. */
  .st .dot{transition:background var(--t-col) var(--ease),border-color var(--t-col) var(--ease)}
  .st.lit .dot{background:var(--accent);border-color:var(--accent)}

  /* ============ LISTES ET TABLEAUX ============ */

  .sp:hover{background:var(--panel)}
  .sp{margin:0 -16px;padding-left:16px;padding-right:16px}
  .lrow:hover .ln{color:var(--accent-ink)}
  .mc:hover .pt{color:var(--accent-ink)}
  .rr:hover .rn{color:var(--accent-ink)}
  .val i{transition:background var(--t-col) var(--ease),width var(--t-fill) var(--ease)}
  .val:hover i{background:var(--accent);width:40px}
  .cat:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
  .cat.on:hover{color:var(--on-orange)}
  .tags span:hover{border-color:var(--accent-ink);color:var(--accent-ink)}

  /* ============ J1 — OUVERTURE : LE TEXTE POUSSE VERS LE BAS ============ */
  /* une seule durée (--t-fill) et une seule courbe (--ease-out) pour tout le mouvement du pli :
     la hauteur, le chevron et la couleur du titre partent et s'arrêtent ensemble */
  .fq summary{transition:color var(--t-fill) var(--ease-out)}
  .fq summary::after{transition:transform var(--t-fill) var(--ease-out),border-color var(--t-fill) var(--ease-out)}
  /* l'ouverture est animée en hauteur : le titre et le chevron ne bougent jamais */
  .fq .fqin{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-fill) var(--ease-out)}
  .fq.opened .fqin{grid-template-rows:1fr}
  .fq .fqin>div{overflow:hidden;min-height:0}
  /* la réponse se fond pendant que la hauteur s'ouvre : elle n'apparaît jamais d'un bloc */
  .fq .fqin p{opacity:0;transform:translateY(-8px);
    transition:opacity .3s var(--ease),transform var(--t-fill) var(--ease-out)}
  .fq.opened .fqin p{opacity:1;transform:none;
    transition:opacity .5s .2s var(--ease),transform var(--t-fill) var(--ease-out)}
  @keyframes fqopen{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .fold .fbdy{animation:fqopen .5s var(--ease-out) both}

  /* le contenu du formulaire se fond et glisse dans le sens de la bascule */
  #fInner{transition:opacity .5s var(--ease),transform .5s var(--ease)}
  #fInner.out-l{opacity:0;transform:translateX(-22px)}
  #fInner.out-r{opacity:0;transform:translateX(22px)}

  /* ============ PIED DE PAGE ============ */
  .fc a{display:inline-block}
  .fc a:hover{color:var(--accent-ink)}
  .fend a:hover{color:var(--accent-ink)}

  /* ============ ACCESSIBILITÉ CLAVIER ============ */
  a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
  select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:3px}
  .flab input:focus,.flab select:focus,.flab textarea:focus,
  .fld input:focus,.fld select:focus,.din:focus{outline:none;border-color:var(--accent-ink)}

  /* ============ G1 — APPARITION AU DÉFILEMENT ============ */
  .rise{opacity:0;transform:translateY(22px)}
  .rise.in{opacity:1;transform:none;
    transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}



  @media(max-width:700px){
    .orow{min-width:0}
    .orow span{min-width:0;overflow-wrap:anywhere}
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
    .rise{opacity:1;transform:none}
  }
  /* ================= COMPARATEUR DE POSTES : LES FICHES ALIGNEES ================= */
  /* police de base de la maquette : le texte courant en IBM Plex Sans, les noms et le texte du haut en Archivo */
  .cmp{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:32px;
    font-family:'IBM Plex Sans',Helvetica,sans-serif;font-size:15px;font-weight:400;letter-spacing:normal;line-height:1.5}
  .cmp-chips{display:flex;flex-wrap:wrap;gap:8px}
  .cmp-chip{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:15px;font-weight:500;line-height:1.4;
    color:var(--dim);background:none;border:1px solid var(--line2);border-radius:3px;padding:8px 16px;cursor:pointer;
    transition:color .16s,border-color .16s,background .16s}
  .cmp-chip:hover{color:var(--ink);border-color:var(--mute)}
  .cmp-chip[aria-pressed="true"]{color:var(--on-orange);background:var(--accent);border-color:var(--accent)}
  .cmp-chip.lock{cursor:default}
  .cmp-chip.lock svg{display:block;flex:none}
  .cmp-chip:focus-visible,.cmp-clr:focus-visible,.cmp-add:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
  .cmp-clr{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:8px 2px;cursor:pointer;
    font-family:inherit;font-size:15px;font-weight:500;line-height:1.4;color:var(--mute);border-bottom:1px solid transparent;
    transition:color .16s,border-color .16s}
  .cmp-clr svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none;flex:none}
  .cmp-clr:hover:not([aria-disabled="true"]){color:var(--accent-ink);border-bottom-color:var(--accent-ink)}
  .cmp-clr[aria-disabled="true"]{opacity:.4;cursor:default}
  .cmp-err{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--accent-ink);min-height:1.5em}
  /* G2 (Enzo, 27/09/2026) : colonne elargie, le texte le plus long tient sur moins de lignes et laisse moins de blanc */
  .cmp-say{margin:32px 0 0;max-width:90ch;font-family:var(--disp);font-size:20px;font-weight:500;line-height:1.5;
    font-stretch:96%;color:var(--ink);text-wrap:pretty}
  .cmp-say b{color:var(--accent-ink);font-weight:600}
  .cmp-say.wait{color:var(--mute)}
  /* moins de deux postes : sous la phrase, des lignes en squelette tiennent la place du texte a venir */
  .cmp-sq{display:block}
  .cmp-say .cmp-bone{display:block;height:.6em;margin:.45em 0;border-radius:3px;background:var(--line)}
  /* trois emplacements fixes, lignes alignees d'une carte a l'autre (subgrid) */
  .cmp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--rows),auto);
    gap:0 20px;margin-top:32px}
  .cmp-card{grid-row:span var(--rows);display:grid;grid-template-rows:subgrid;background:var(--bg);border:1px solid var(--line);
    border-radius:3px;padding:24px 24px 16px;min-width:0}
  .cmp-card.me{border-color:var(--accent-ink)}
  .cmp-tg{font-size:12px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);align-self:end}
  .cmp-nm{font-family:var(--disp);font-size:30px;font-weight:600;font-stretch:88%;letter-spacing:-.03em;line-height:1.1;
    padding-bottom:8px;color:var(--ink)}
  a.cmp-nm:hover{color:var(--accent-ink)}
  .cmp-g{font-size:12px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:24px;padding-top:16px;
    border-top:1px solid var(--line)}
  .cmp-cell{padding-top:16px}
  .cmp-cell .k{font-size:12px;line-height:1.5;color:var(--mute)}
  .cmp-cell .v{font-size:15px;color:var(--dim);margin-top:2px;line-height:1.4;overflow-wrap:break-word}
  .cmp-cell .v.d{color:var(--ink);font-weight:500}
  .cmp-cell .v.nc{color:var(--mute)}
  /* emplacement vide : squelette en attente */
  .cmp-card.cmp-vide{border:1px dashed var(--line2);background:transparent;position:relative}
  .cmp-card .cmp-bone{display:block;height:10px;border-radius:3px;background:var(--line);margin-top:8px}
  .cmp-card .cmp-bone.s{width:38%}.cmp-card .cmp-bone.m{width:62%}.cmp-card .cmp-bone.l{width:84%}
  .cmp-card .cmp-bone.t{height:20px;width:55%;margin-top:4px}
  .cmp-card.cmp-vide .cmp-cell .k .cmp-bone{height:8px;width:30%;margin-top:0}
  @media (prefers-reduced-motion:no-preference){
    .cmp-card .cmp-bone,.cmp-say .cmp-bone{background:linear-gradient(90deg,var(--line) 0%,var(--line2) 45%,var(--line) 90%);background-size:220% 100%;
      animation:cmpsh 1.8s var(--ease) infinite}
    @keyframes cmpsh{from{background-position:120% 0}to{background-position:-100% 0}}
  }
  .cmp-add{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    padding:170px 12px 0;gap:8px;text-align:center;background:none;border:0;border-radius:3px;font-family:inherit;color:inherit;cursor:pointer}
  .cmp-add .cmp-plus{width:44px;height:44px;border-radius:50%;border:1px dashed var(--accent-ink);color:var(--accent-ink);display:grid;
    place-items:center;font-size:24px;line-height:1;font-weight:500;background:var(--panel);transition:background .16s}
  .cmp-add:hover .plus{background:var(--bg)}
  .cmp-add .cmp-t{font-size:15px;line-height:1.4;color:var(--dim);max-width:22ch;background:var(--panel);padding:4px 8px;border-radius:3px}
  .cmp-add .cmp-sh{display:none}
  /* gabarit de mesure : hors de la vue, jamais lu par un lecteur d'ecran */
  .cmp-mw{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;visibility:hidden;pointer-events:none}
  .cmp-meas{position:absolute;left:0;top:0;margin:0}
  .cmp-sm{position:absolute;left:0;top:0;margin:0;max-width:none}
  @media (max-width:1100px){
    .cmp{padding:24px}
    .cmp-grid{column-gap:12px}
    .cmp-card{padding:20px 16px 16px}
    .cmp-nm{font-size:24px}
    .cmp-add{padding-top:150px}
  }
  @media (max-width:760px){
    .cmp{padding:16px}
    .cmp-clr{margin-left:0}
    .cmp-err{margin-top:8px}
    .cmp-say{margin-top:16px;font-size:17px}
    .cmp-grid{grid-template-columns:1fr;grid-template-rows:none;gap:16px}
    .cmp-card{grid-row:auto;display:block;padding:20px 16px 16px}
    /* l'etiquette et le nom du poste partagent la premiere ligne de la carte. Depuis la sortie du mode de
       compatibilite (29/09/2026), l'interligne de la carte elle-meme agrandissait cette ligne : il ne compte
       plus, comme avant ; tout ce que contient la carte garde son interligne. */
    .cmp-card{line-height:0}
    :where(.cmp-card>:not(button)){line-height:1.5}
    .cmp-card.cmp-vide{padding:16px}
    .cmp-card.cmp-vide>*:not(.cmp-add){display:none}
    .cmp-add{position:static;padding:8px 0;flex-direction:row;justify-content:flex-start;width:100%;text-align:left}
    .cmp-add .cmp-plus{width:34px;height:34px;font-size:20px}
    .cmp-add .cmp-lg{display:none}
    .cmp-add .cmp-sh{display:inline}
  }
.fsig{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* iris d'entree dans la charte (Enzo, 01/10/2026) : un voile noir au-dessus de tout, que le script dessine ;
   sur la charte, le noir est la des le premier affichage (classe posee dans l'en-tete de la page) */
#iris{position:fixed;inset:0;z-index:2147483000;pointer-events:none}
#iris.on{pointer-events:auto}
html.iris-noir::after{content:"";position:fixed;inset:0;z-index:2147483000;background:#000}
  /* espace equipe (Enzo, 02/10/2026) : un appui long de 2 s sur le logo de l'en-tete ouvre /equipe/ ; le trait
     orange se remplit sous le logo pendant l'appui, a partir de 0,4 s (equipe.py). Ni selection, ni glisser, ni
     apercu du lien. */
  header .hl>a{position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
    touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  header .hl>a img{-webkit-user-drag:none}
  .eqhold{position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--accent);transform:scaleX(0);
    transform-origin:0 50%;opacity:0;pointer-events:none}
  /* ===== les bandeaux du calendrier (Enzo, 08/10/2026 ; bandeaux.py) : sous l'en-tête, sur toute la largeur, au fond
     du panneau, un filet dessous ; le texte centré (15 px, 13 px sur téléphone), un point orange devant, le signal du
     site ; la croix à droite, dans une zone de toucher de 44 px. Il défile avec la page : l'en-tête reste collé en
     haut, le menu du téléphone s'ouvre par-dessus, le bandeau des cookies reste en bas ===== */
  .cal{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;
    padding:12px calc(var(--gut) + 48px);background:var(--panel);border-bottom:1px solid var(--line)}
  .cal[hidden]{display:none}
  .calt{margin:0;max-width:72ch;font-size:15px;line-height:1.5;color:var(--ink);text-align:center;text-wrap:balance}
  .calt::before{content:"";display:inline-block;width:6px;height:6px;margin:0 12px 0 0;border-radius:50%;
    background:var(--accent);vertical-align:middle;transform:translateY(-1px)}
  .calx{position:absolute;top:calc(50% - 22px);right:calc(var(--gut) - 12px);display:grid;place-items:center;
    width:44px;height:44px;padding:0;background:transparent;border:0;border-radius:3px;color:var(--dim);cursor:pointer;
    transition:color .16s var(--ease)}
  .calx:hover{color:var(--accent-ink)}
  .calx svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
  /* d'une page à l'autre, le bandeau ne bouge pas, comme l'en-tête */
  #root>.cal{view-transition-name:bandeau-annonce}
  ::view-transition-group(bandeau-annonce),::view-transition-new(bandeau-annonce){animation:none}
  ::view-transition-old(bandeau-annonce){display:none}
  @media(max-width:767.98px){
    .cal{min-height:44px;padding:8px calc(var(--gut) + 32px) 8px var(--gut)}
    .calt{font-size:13px;text-align:left}
    .calx{right:calc(var(--gut) - 16px)}
  }