:root{
    --fond:#020817; --surface:#0f172a; --surface2:#1e293b;
    --primaire:#3b82f6; --texte:#e2e8f0; --doux:#94a3b8;
    --ok:#22c55e; --r:.6rem;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--fond);color:var(--texte);
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    line-height:1.6;-webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  .wrap{max-width:1140px;margin:0 auto;padding:0 1.15rem}

  /* Téléphone d'abord. L'écran large élargit ensuite — l'inverse produit une
     page d'ordinateur rétrécie. */
  header.tete{padding:1.1rem 0;border-bottom:1px solid var(--surface2)}
  .tete .wrap{display:flex;align-items:center;gap:.7rem;justify-content:space-between}
  .marque{display:flex;text-decoration:none;color:inherit;align-items:center;gap:.6rem;font-weight:650;font-size:1.05rem}
  .marque svg{width:30px;height:30px;flex:0 0 auto}
  .btn{
    display:inline-block;background:var(--primaire);color:#fff;
    padding:.72rem 1.15rem;border-radius:var(--r);font-weight:600;
    text-decoration:none;min-height:44px;line-height:1.6;font-size:.95rem;
    border:1px solid var(--primaire);
  }
  .btn.fantome{background:transparent;color:var(--texte);border-color:var(--surface2)}
  .btn:active{transform:translateY(1px)}

  .hero{padding:3rem 0 2.5rem}
  .hero h1{font-size:2rem;line-height:1.2;margin:0 0 1rem;font-weight:700;letter-spacing:-.02em}
  .hero p.chapo{font-size:1.1rem;color:var(--doux);margin:0 0 1.8rem;max-width:38ch}
  .hero .actions{display:flex;flex-wrap:wrap;gap:.7rem}
  .rassure{margin-top:1.4rem;color:var(--doux);font-size:.88rem}

  section{padding:2.6rem 0;border-top:1px solid var(--surface2)}  h2{font-size:1.35rem;margin:0 0 .6rem;font-weight:650;letter-spacing:-.01em}
  .sous{color:var(--doux);margin:0 0 1.6rem;max-width:56ch}

  .grille{display:grid;gap:.85rem;grid-template-columns:1fr}
  .carte{
    background:var(--surface);border:1px solid var(--surface2);
    border-radius:var(--r);padding:1.15rem;
    min-height:110px;display:flex;flex-direction:column;justify-content:center;
  }
  .carte h3{margin:0 0 .4rem;font-size:1.02rem;font-weight:600}
  .carte p{margin:0;color:var(--doux);font-size:.93rem}

  .offres{display:grid;gap:.85rem;grid-template-columns:1fr}
  .offre{
    background:var(--surface);border:1px solid var(--surface2);
    border-radius:var(--r);padding:1.25rem;display:flex;flex-direction:column;
  }
  .offre.phare{border-color:var(--primaire)}
  .etiquette{
    display:inline-block;font-size:.7rem;text-transform:uppercase;
    letter-spacing:.07em;color:var(--primaire);font-weight:700;margin-bottom:.5rem;
  }
  .offre h3{margin:0 0 .15rem;font-size:1.05rem;font-weight:600}
  .prix{font-size:1.85rem;font-weight:700;line-height:1.1;margin:.5rem 0 .1rem}
  .prix span{font-size:.85rem;font-weight:500;color:var(--doux)}
  .offre ul{margin:.9rem 0 1.1rem;padding-left:1.1rem;color:var(--doux);font-size:.92rem}
  .offre li{margin-bottom:.32rem}
  .offre .btn{margin-top:auto;text-align:center}

  ol.etapes{counter-reset:e;list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
  ol.etapes li{
    background:var(--surface);border:1px solid var(--surface2);
    border-radius:var(--r);padding:1rem 1rem 1rem 3.1rem;position:relative;
  }
  ol.etapes li::before{
    counter-increment:e;content:counter(e);
    position:absolute;left:1rem;top:.95rem;
    width:1.6rem;height:1.6rem;border-radius:50%;
    background:var(--primaire);color:#fff;font-weight:700;font-size:.85rem;
    display:flex;align-items:center;justify-content:center;
  }
  ol.etapes b{display:block;font-weight:600;margin-bottom:.15rem}
  ol.etapes span{color:var(--doux);font-size:.92rem}

  .franchise{
    background:var(--surface);border:1px solid var(--surface2);
    border-left:3px solid var(--primaire);
    border-radius:var(--r);padding:1.15rem;color:var(--doux);font-size:.94rem;
  }
  .franchise b{color:var(--texte)}

  /* PIED RACCOURCI (03/09/2026) : il tient en une ligne, il ne doit plus
     prendre la hauteur d'un paragraphe. Mesure avant/apres sur un
     telephone de 844 points de haut : la page passait de 990 a 844. */
  footer{border-top:1px solid var(--surface2);padding:.9rem 0 1.1rem;color:var(--doux);font-size:.85rem}
  footer a{color:var(--doux)}
  footer .legal{margin-top:0;line-height:1.6}
  footer .reseaux{max-width:1140px;margin:0 auto;padding:0 1.15rem}

  @media (min-width:720px){
    .hero{padding:4.5rem 0 3.5rem}
    .hero h1{font-size:3rem;max-width:16ch}
    .hero p.chapo{font-size:1.25rem}
    h2{font-size:1.75rem}
    section{padding:3.6rem 0}
    .grille{grid-template-columns:repeat(2,1fr);gap:1rem}
    .offres{grid-template-columns:repeat(3,1fr);gap:1rem}
    ol.etapes{grid-template-columns:repeat(3,1fr)}
  }

    /* L'équipe : une photo mentale par ligne. En colonnes serrées, quatre
       visages se ressemblent ; en lignes larges, on lit le rôle avant le nom,
       ce qui est l'ordre utile. */
    .equipe{display:grid;gap:1rem;grid-template-columns:1fr}
    @media(min-width:760px){.equipe{grid-template-columns:1fr 1fr;gap:1.25rem 1.75rem}}
    .tete-equipe{display:flex;gap:1rem;align-items:flex-start;
      background:var(--surface);border:1px solid var(--surface2);
      border-radius:var(--r);padding:1.1rem}
    .tete-equipe svg{flex:0 0 auto;border-radius:16px}
    .tete-equipe h3{margin:.1rem 0 .35rem;font-size:1.05rem}
    .tete-equipe p{margin:0;font-size:.92rem;color:var(--doux)}
      .nav-tete{display:flex;align-items:center;gap:1rem}
    .nav-tete>a:first-child{font-size:.92rem;color:var(--doux);text-decoration:none}
    .nav-tete>a:first-child:hover{color:var(--texte)}
      .actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto}
    .actions .btn{flex:1 1 auto;text-align:center}
    .mention-cgv{margin-top:1.5rem;font-size:.82rem;color:var(--doux);text-align:center}
    .mention-cgv a{color:var(--doux);text-decoration:underline}
  
  /* ================================================================
     CE QUI MANQUAIT : que la page REPONDE.
     Une page ou rien ne bouge sous le curseur est lue comme un document,
     quelle que soit sa beaute. Ce qui fait << application >>, ce sont les
     retours : le survol, l enfoncement, le focus visible, l en-tete qui se
     densifie quand on descend. Tout est court (120-200 ms) et discret : une
     animation qu on remarque est une animation de trop.
     ================================================================ */

  /* Une seule regle de transition, appliquee a ce qui est manipulable.
     Ecrire la transition element par element finit toujours par en oublier un,
     et c est celui-la qu on remarque. */
  a, button, .btn, .carte, .offre, .tete-equipe, ol.etapes li{
    transition:background-color .16s ease, border-color .16s ease,
               color .16s ease, transform .16s ease, box-shadow .16s ease;
  }
  @media (prefers-reduced-motion:reduce){
    a, button, .btn, .carte, .offre, .tete-equipe, ol.etapes li,
    .monte, html{transition:none !important; animation:none !important;
                 scroll-behavior:auto !important}
  }

  /* Le focus clavier. Il etait invisible : quelqu un qui navigue au clavier
     ne savait pas ou il se trouvait. C est une panne d accessibilite ET une
     des choses qui font qu une page ne se comporte pas comme un logiciel. */
  a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible{
    outline:2px solid var(--primaire);outline-offset:3px;border-radius:.35rem;
  }

  /* L EN-TETE QUI SE DENSIFIE.
     Il reste en haut et gagne un fond flou + une ombre des qu on descend.
     C est le signal le plus fort de tous : la page devient une surface qu on
     parcourt, pas une feuille qu on deroule. */
  header.tete{
    position:sticky;top:0;z-index:50;
    background:rgba(2,8,23,.72);
    backdrop-filter:saturate(160%) blur(12px);
    -webkit-backdrop-filter:saturate(160%) blur(12px);
    border-bottom:1px solid transparent;
    transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  }
  header.tete.pose{
    border-bottom-color:var(--surface2);
    background:rgba(2,8,23,.88);
    box-shadow:0 8px 24px -14px rgba(0,0,0,.9);
  }
  /* Repli : sans flou disponible, un fond plein plutot qu un en-tete
     translucide illisible par-dessus le texte. */
  @supports not (backdrop-filter:blur(4px)){
    header.tete{background:var(--fond)}
  }

  /* LE NOM COUPE SUR TELEPHONE.
     Sur un ecran etroit, << Tour de controle >> + trois liens + un bouton ne
     tiennent pas : le nom se faisait rogner. On garde le logo, qui suffit a
     identifier, et le nom revient des qu il y a la place. Le nom reste dans le
     code pour les lecteurs d ecran et les moteurs de recherche — il est
     masque a l oeil, pas supprime. */
  .marque .mot{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .marque svg{transition:transform .25s ease}
  .marque:hover svg{transform:rotate(-6deg) scale(1.06)}
  .nav-tete{gap:.55rem}
  /* Le lien << Qui est derriere >> disparait sur tres petit ecran : trois
     liens plus un bouton ne tiennent pas a 360 px, et un menu qui deborde
     est pire qu'un lien en moins. Le bloc reste accessible en defilant. */
  .lien-qui{display:none;font-size:.92rem;color:var(--doux);text-decoration:none}
  .lien-qui:hover{color:var(--texte)}
  @media(min-width:640px){.lien-qui{display:inline}}
  @media(min-width:560px){
    .marque .mot{position:static;width:auto;height:auto;overflow:visible;
                 clip:auto}
    .nav-tete{gap:1rem}
  }

  /* Les retours au survol. Discrets, mais presents partout. */
  .btn:hover{filter:brightness(1.12)}
  .btn.fantome:hover{background:var(--surface);border-color:#33425e}
  .btn:active{transform:translateY(1px) scale(.995);filter:brightness(.96)}
  .nav-tete>a:first-child, .nav-tete>a:nth-child(2){
    padding:.35rem .5rem;border-radius:.4rem;text-decoration:none;
    color:var(--doux);font-size:.92rem;
  }
  .nav-tete>a:first-child:hover, .nav-tete>a:nth-child(2):hover{
    color:var(--texte);background:var(--surface);
  }
  .carte:hover, .tete-equipe:hover, ol.etapes li:hover{
    border-color:#2f3f5b;transform:translateY(-2px);
    box-shadow:0 14px 28px -20px rgba(0,0,0,.95);
  }
  .offre:hover{border-color:#33425e;transform:translateY(-3px);
    box-shadow:0 20px 40px -26px rgba(0,0,0,1)}
  .offre.phare:hover{border-color:var(--primaire);
    box-shadow:0 20px 46px -24px rgba(59,130,246,.45)}
  footer a:hover{color:var(--texte)}

  /* De la profondeur derriere le titre. Un aplat uniforme, c est du papier ;
     une lumiere qui vient de quelque part, c est un ecran. */
  .hero{position:relative;overflow:hidden}
  .hero::before{
    content:"";position:absolute;inset:-30% -15% auto -15%;height:85%;
    background:radial-gradient(58% 62% at 28% 0%,rgba(59,130,246,.20),transparent 72%);
    pointer-events:none;
  }
  .hero .wrap{position:relative}

  /* ================================================================
     MONTRER LE PRODUIT.
     La maquette est dessinee en CSS, pas photographiee : elle reste nette sur
     tous les ecrans, ne pese rien, et ne se perime pas a chaque retouche de
     l interface. Elle reprend l accueil reel — le cap, ce qui attend
     aujourd hui, l etat du chantier.
     ================================================================ */
  @media(min-width:900px){
    /* De l'air entre le texte et l'appareil. A 3,5 rem ils se touchaient
       presque : deux blocs colles se lisent comme un seul, et le telephone
       cessait d'etre une illustration pour devenir une colonne de texte de
       plus. La colonne du texte est aussi retrecie — une ligne de plus de
       65 caracteres fatigue, et il y avait la place. */
    .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;
      gap:5.5rem;align-items:center}
    .hero-texte{max-width:34rem}
    /* La seconde colonne de la grille du hero. Elle etait declaree depuis
       toujours et n'a jamais rien contenu : d'ou le vide a droite sur
       /qui et /temoignage (constate par Patrick le 06/08). */
    .hero-visuel{display:block;width:min(26rem,38vw);}
    .hero-visuel img{display:block;width:100%;height:auto;
      border-radius:1.1rem;}
    .hero h1{max-width:none}
  }
  .hero-texte{min-width:0}

  /* LE CHASSIS, AUX PROPORTIONS REELLES.
     Le rapport est celui de l'iPhone 15 pris tel quel : 393 x 852 points.
     Pose en `aspect-ratio` et non en hauteur fixe, la proportion reste juste a
     n'importe quelle largeur. L'ecart avec un Galaxy S24 (360x780) est de
     0,06 % — invisible a l'oeil, donc un seul chassis suffit pour les deux.
     Le rayon des coins est volontairement gros — sur un vrai appareil il fait
     environ 14 % de la largeur, et c'est l'un des premiers reperes que l'oeil
     utilise pour reconnaitre un telephone. */
  .tel{
    width:100%;max-width:252px;margin:2.75rem auto 0;
    background:#0b1220;border:1px solid #22304a;border-radius:44px;padding:11px;
    box-shadow:0 40px 80px -20px rgba(0,0,0,.85),
               0 0 0 1px rgba(59,130,246,.09),
               inset 0 1px 0 rgba(255,255,255,.06);
    transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
  }
  .tel:hover{transform:translateY(-6px);
    box-shadow:0 52px 100px -20px rgba(0,0,0,.9),
               0 0 0 1px rgba(59,130,246,.22),
               inset 0 1px 0 rgba(255,255,255,.08)}
  @media(min-width:900px){.tel{margin:0}}

  .tel-ecran{
    position:relative;background:var(--fond);border-radius:34px;
    aspect-ratio:393/852;overflow:hidden;
    display:flex;flex-direction:column;
    padding:0 12px 8px;font-size:.72rem;line-height:1.42;
  }

  /* La barre d'etat et l'encoche. Sans elles, un rectangle aux bonnes
     proportions ne se lit toujours pas comme un telephone : ce sont ces
     reperes-la que l'oeil cherche en premier. */
  .tel-statut{
    flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
    padding:.55rem .35rem .3rem;font-size:.6rem;font-weight:700;
    color:var(--texte);font-variant-numeric:tabular-nums;
  }
  .tel-statut .sig{display:flex;align-items:center;gap:3px}
  .tel-statut .sig i{display:block;width:2.5px;border-radius:1px;
    background:var(--texte)}
  .tel-statut .bat{width:15px;height:8px;border:1px solid var(--texte);
    border-radius:2.5px;position:relative;opacity:.9}
  .tel-statut .bat::before{content:"";position:absolute;inset:1.5px;
    right:4px;background:var(--texte);border-radius:1px}
  .tel-statut .bat::after{content:"";position:absolute;right:-3px;top:2.5px;
    width:1.5px;height:3px;background:var(--texte);border-radius:0 1px 1px 0}
  .encoche{
    position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:64px;height:17px;background:#000;border-radius:99px;z-index:2;
  }

  .tel-titre{font-size:.55rem;text-transform:uppercase;letter-spacing:.11em;
    color:var(--doux);margin:0 0 .35rem;font-weight:700}
  .tel-tete{display:flex;align-items:center;gap:.5rem;
    margin:.35rem 0 .7rem;flex:0 0 auto}
  .tel-tete .pastille{width:24px;height:24px;border-radius:7px;flex:0 0 auto;
    background:linear-gradient(140deg,#60a5fa,#1d4ed8)}
  .tel-tete b{font-size:.76rem;display:block;line-height:1.25}
  .tel-tete span{color:var(--doux);font-size:.58rem}

  .tel-cap{background:var(--surface);border:1px solid var(--surface2);
    border-left:2px solid var(--primaire);border-radius:7px;
    padding:.45rem .55rem;margin-bottom:.7rem}
  .tel-cap i{font-style:normal;color:#60a5fa;font-size:.54rem;font-weight:700;
    letter-spacing:.11em;text-transform:uppercase}
  .tel-cap p{margin:.15rem 0 .35rem;font-size:.68rem}
  .jauge{display:block;height:3px;border-radius:2px;background:var(--surface2);
    overflow:hidden}
  .jauge i{display:block;height:100%;width:98%;border-radius:2px;
    background:linear-gradient(90deg,#3b82f6,#60a5fa)}

  .tel-liste{background:var(--surface);border:1px solid var(--surface2);
    border-radius:8px;overflow:hidden;margin-bottom:.7rem}
  .tel-l{display:flex;align-items:center;gap:.45rem;padding:.45rem .55rem;
    border-bottom:1px solid var(--surface2)}
  .tel-l:last-child{border-bottom:0}
  .tel-l .p{width:5px;height:5px;border-radius:50%;flex:0 0 auto}
  .tel-l .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-size:.66rem}
  .tel-l .e{font-size:.53rem;color:var(--doux);white-space:nowrap}
  .tel-l .t.fini{color:var(--doux);text-decoration:line-through}
  .tel-cpt{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
  .tel-c{background:var(--surface);border:1px solid var(--surface2);
    border-radius:8px;padding:.45rem .25rem;text-align:center}
  .tel-c b{display:block;font-size:.95rem;line-height:1;
    font-variant-numeric:tabular-nums}
  .tel-c span{font-size:.5rem;color:var(--doux);display:block;margin-top:.2rem}

  /* LA NAVIGATION, EN CSS PUR.
     Des boutons radio caches pilotent l'ecran affiche. Aucun JavaScript : ca
     marche si le script ne charge pas, c'est utilisable au clavier sans rien
     ajouter, et il n'y a aucun etat a maintenir. Les radios doivent rester
     AVANT les vues et les onglets — le selecteur ~ ne regarde qu'en aval. */
  .tel-radio{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
  .vues{flex:1 1 auto;min-height:0;overflow:hidden;display:flex}
  .vue{display:none;width:100%;flex-direction:column;
       justify-content:space-between}
  #ec-accueil:checked ~ .vues .v-accueil,
  #ec-projets:checked ~ .vues .v-projets,
  #ec-equipe:checked  ~ .vues .v-equipe{display:flex}

  .tel-onglets{
    flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:.1rem;
    border-top:1px solid var(--surface2);padding:.4rem 0 .1rem;margin-top:.4rem;
  }
  .tel-onglets label{display:flex;flex-direction:column;align-items:center;
    gap:.18rem;padding:.3rem .1rem;border-radius:8px;cursor:pointer;
    color:var(--doux);font-size:.54rem;font-weight:600;
    transition:color .16s ease,background-color .16s ease}
  .tel-onglets label:hover{color:var(--texte);background:var(--surface)}
  .tel-onglets svg{width:16px;height:16px;stroke:currentColor;fill:none;
    stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  #ec-accueil:checked ~ .tel-onglets label[for="ec-accueil"],
  #ec-projets:checked ~ .tel-onglets label[for="ec-projets"],
  #ec-equipe:checked  ~ .tel-onglets label[for="ec-equipe"]{color:#60a5fa}
  /* Le focus clavier atterrit sur un bouton radio invisible : on le reporte
     sur l'onglet correspondant, sinon la tabulation avance dans le vide. */
  #ec-accueil:focus-visible ~ .tel-onglets label[for="ec-accueil"],
  #ec-projets:focus-visible ~ .tel-onglets label[for="ec-projets"],
  #ec-equipe:focus-visible  ~ .tel-onglets label[for="ec-equipe"]{
    outline:2px solid var(--primaire);outline-offset:2px}

  /* Le trait d'accueil. Trois pixels qui font enormement pour la
     reconnaissance — c'est le dernier repere du chassis moderne. */
  .accueil-trait{
    flex:0 0 auto;width:88px;height:3.5px;border-radius:99px;
    background:#334155;margin:.25rem auto 0;
  }

  /* Les projets */
  .barre{height:3.5px;border-radius:3px;background:var(--surface2);
    overflow:hidden;margin-top:.3rem}
  .barre i{display:block;height:100%;border-radius:3px;
    background:linear-gradient(90deg,#3b82f6,#60a5fa)}
  .proj{background:var(--surface);border:1px solid var(--surface2);
    border-radius:8px;padding:.45rem .55rem;margin-bottom:.4rem}
  .proj b{font-size:.68rem;font-weight:600}
  .proj .pc{float:right;color:var(--doux);font-size:.62rem;
    font-variant-numeric:tabular-nums}

  /* L'equipe */
  .ag{display:flex;align-items:center;gap:.45rem;padding:.4rem .05rem;
    border-bottom:1px solid var(--surface2)}
  .ag:last-child{border-bottom:0}
  .ag .rond{width:22px;height:22px;border-radius:50%;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    font-size:.58rem;font-weight:700;color:#fff}
  .ag .nom{flex:1;min-width:0;font-size:.68rem;font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ag .nom span{display:block;font-weight:400;color:var(--doux);
    font-size:.58rem;overflow:hidden;text-overflow:ellipsis}
  .ag .etat{font-size:.5rem;padding:.12rem .35rem;border-radius:99px;
    white-space:nowrap;font-weight:600}
  .etat.actif{background:rgba(34,197,94,.14);color:#4ade80}
  .etat.repos{background:var(--surface2);color:var(--doux)}

  .legende{text-align:center;color:var(--doux);font-size:.79rem;margin-top:1rem}

  /* Les sections montent doucement a l arrivee. La classe est posee PAR LE
     JAVASCRIPT : sans lui, ou si le navigateur ne sait pas observer, tout
     reste simplement visible. On ne cache jamais du contenu en pariant sur un
     script. */
  .monte{opacity:0;transform:translateY(16px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
  .monte.vu{opacity:1;transform:none}

    /* ================================================================
     MENU DÉROULANT — style carte (daisyUI-like).
     Bouton pilule + chevron, panneau carte ombré, flèche, hover net.
     Les titres du menu ne sont JAMAIS soulignés.
  */
  .nav-tete{flex-wrap:wrap}
  .nav-lien{
    padding:.5rem .7rem;border-radius:999px;color:var(--doux);
    font-size:.92rem;text-decoration:none;transition:color .15s ease;
  }
  .nav-lien:hover{color:var(--texte)}
  .dd{position:relative}
  /* Pont invisible entre le bouton et le panneau : sans lui, la souris qui
     descend vers le menu traverse un vide et le survol se perd — le dropdown
     « n arrive pas a s ouvrir » (bug vu le 01/08). */
  .dd::after{content:"";position:absolute;top:100%;left:0;width:100%;height:.75rem}
  .dd-btn{
    display:inline-flex;align-items:center;gap:.35rem;
    padding:.5rem .9rem;border-radius:999px;
    border:1px solid var(--surface2);background:transparent;
    color:var(--doux);font:inherit;font-size:.92rem;cursor:pointer;
    text-decoration:none;transition:all .18s ease;
  }
  .dd-btn:hover{color:var(--texte);border-color:#33425e;background:var(--surface)}
  .dd-btn:focus-visible{outline:2px solid var(--primaire);outline-offset:2px}
  .dd-btn .chev{font-size:.7rem;opacity:.65;transition:transform .18s ease}
  .dd:hover .dd-btn .chev,.dd:focus-within .dd-btn .chev{transform:rotate(180deg)}
  .dd-menu{
    display:none;position:absolute;top:calc(100% + .55rem);left:0;
    min-width:15.5rem;background:var(--surface);
    border:1px solid var(--surface2);border-radius:.85rem;padding:.45rem;
    box-shadow:0 18px 45px -18px rgba(0,0,0,.6);z-index:60;
    opacity:0;transform:translateY(-4px);
    transition:opacity .15s ease,transform .15s ease;
  }
  .dd-menu::before{
    content:"";position:absolute;top:-6px;left:1.35rem;width:12px;height:12px;
    background:var(--surface);border-top:1px solid var(--surface2);
    border-left:1px solid var(--surface2);transform:rotate(45deg);
  }
  .dd:hover .dd-menu,.dd:focus-within .dd-menu{
    display:block;opacity:1;transform:none;
  }
  .dd-menu a{
    display:block;padding:.55rem .8rem;border-radius:.55rem;
    color:var(--doux);text-decoration:none;font-size:.93rem;white-space:nowrap;
  }
  .dd-menu a:hover{background:rgba(255,255,255,.07);color:var(--texte)}
  /* ================================================================
     NAV BAR BOOTSTRAP — restylée en sombre, cohérente avec le site.
     Le dropdown s'ouvre AU CLIC (Bootstrap) : plus de bug de survol.
  */
  .nav-tour{background:transparent;padding:0}
  .nav-tour .navbar-brand{padding:0;margin-right:1.1rem}
  .nav-tour .nav-link{color:var(--doux);font-size:.92rem;padding:.5rem .9rem;border-radius:999px}
  .nav-tour .nav-link:hover,.nav-tour .nav-link.show{color:var(--texte)}
  .nav-tour .navbar-toggler{border:1px solid var(--surface2);border-radius:.5rem;color:var(--doux)}
  .nav-tour .navbar-toggler:hover{border-color:var(--primaire)}
  .nav-tour .dropdown-menu{
    background:var(--surface);border:1px solid var(--surface2);border-radius:.85rem;
    box-shadow:0 18px 45px -18px rgba(0,0,0,.6);padding:.45rem;min-width:14rem;
  }
  .nav-tour .dropdown-item{
    color:var(--doux);border-radius:.55rem;padding:.55rem .85rem;font-size:.93rem;
  }
  .nav-tour .dropdown-item:hover,.nav-tour .dropdown-item:focus{
    background:rgba(255,255,255,.07);color:var(--texte);
  }

  /* Accueil minimal « ~ Preparing » (01/08) : presque rien, une promesse et
     un téléphone. Le curseur clignote comme dans un terminal. */
  /* 13/08 : la section reservait 72vh et centrait son contenu — sur un
     grand ecran ca creusait un trou entre l'en-tete et le texte. Elle prend
     desormais la hauteur de ce qu'elle contient. */
  .preparing{min-height:auto;display:flex;align-items:center;justify-content:center;text-align:center;border-top:none}
  /* `.preparing` est un conteneur flex : sa `.wrap` devient un enfant flex et
     se retrecit a la taille de son contenu. Le `max-width:1140px; margin:0
     auto` de `.wrap` ne s'appliquait donc jamais — la bande de l'accueil
     etait plus etroite que celle de l'en-tete et du pied, et flottait au
     milieu. D'ou le desalignement que l'oeil voit sans savoir le nommer
     (13/08, constat de Patrick). On lui rend sa largeur. */
  .preparing .wrap{width:100%;padding:2rem 1.15rem 2.5rem}
  .preparing-cmd{font-size:clamp(2.2rem,9vw,5rem);font-weight:800;margin:0 0 2.4rem;
                 font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
                 letter-spacing:-.03em;color:var(--texte)}
  .preparing-cmd::after{content:"▌";color:var(--primaire);margin-left:.12em;
                        animation:clignote 1.1s steps(1) infinite}
  .preparing-tel a{display:inline-block;color:var(--primaire);text-decoration:none;
                   font-size:1.25rem;font-weight:600;padding:.7rem 1.5rem;
                   border:1px solid var(--surface2);border-radius:999px;background:var(--surface);
                   /* Sur un telephone, l'adresse etait plus large que l'ecran :
                      la page partait en travers et les boutons de droite se
                      coupaient. Elle retrecit au lieu de pousser la page. */
                   max-width:100%;overflow-wrap:anywhere}
  @media(max-width:430px){
    .preparing-tel a{font-size:1.05rem;padding:.65rem 1.1rem}
  }
  .preparing-tel a:hover{border-color:var(--primaire)}
  .preparing-arch{color:var(--doux);font-size:.95rem;margin-top:1.6rem}
  .preparing-arch b{color:var(--texte)}

  /* (11/08) La page ne disait pas ce qu'est la tour : « Junbi Kanryo — pret »
     ne veut rien dire pour un visiteur, et le vrai titre etait cache aux
     yeux (visible seulement pour Google). Titre visible + une phrase qui
     explique l'ERP ; la ligne japonaise reste, en petit. */
  .preparing-titre{font-size:clamp(1.9rem,5.4vw,3.4rem);font-weight:800;
                   margin:0 0 1.1rem;letter-spacing:-.02em;line-height:1.12;
                   color:var(--texte)}
  .preparing-quoi{color:var(--doux);font-size:clamp(1rem,2.3vw,1.15rem);
                  line-height:1.6;max-width:40rem;margin:0 auto 2rem}
  .preparing-quoi b{color:var(--texte)}
  .preparing-cmd-mini{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
                      font-size:.9rem;color:var(--doux);margin:0 0 1.8rem}
  .preparing-cmd-mini::after{content:"▌";color:var(--primaire);margin-left:.12em;
                             animation:clignote 1.1s steps(1) infinite}
  @keyframes clignote{50%{opacity:0}}

  /* Widget flottant Braignak (01/08) : présent sur toutes les pages. */
  /* LA MASCOTTE, POSEE PAR LE STYLE (06/09/2026).
     La bulle est ecrite en dur dans 211 pages : les toucher une par une,
     c est 211 occasions de casser quelque chose. Leur style, lui, tient
     dans ce seul fichier. On y pose le chiot en image de fond, et on cache
     le telescope qui etait ecrit dans le lien (font-size:0).
     L ADRESSE EST RELATIVE, SANS BARRE DEVANT (06/09, faute reelle) :
     avec « /braignak-mascotte.png », le navigateur cherchait a la
     RACINE du site — 404 dans l essai, et le chiot ne s affichait pas.
     Sans la barre, il cherche a cote de ce fichier de style, ce qui
     marche dans l essai comme en production.
     Pour revenir en arriere : effacer les trois lignes background-image,
     background-size et font-size:0. */
  .braignak-fab{position:fixed;right:1rem;bottom:1rem;width:58px;height:58px;
                border-radius:50%;background:var(--primaire);display:flex;
                align-items:center;justify-content:center;
                background-image:url(braignak-mascotte.png);
                background-size:cover;background-position:center;
                font-size:0;color:transparent;
                text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.45);
                z-index:999}
  .braignak-fab:hover{transform:scale(1.08)}

/* Sous 900 px la grille repasse a une colonne : le visuel deviendrait
   un bloc de plus a faire defiler. On le retire plutot que de
   l'empiler sous le texte. */
@media(max-width:899.98px){.hero-visuel{display:none}}

/* Boutons ?? btn-lien ?? (Debats publics, Community, Etude...) ??? theme sombre par defaut.
   Le style etait inline (sombre) : ca ne suivait pas le theme. Classe + surcharge clair
   dans vitrine-theme.css (09/08). */
/* ACCUEIL EN DEUX COLONNES (11/08) : le texte a gauche, un telephone a
   droite qui montre la vraie page d'accueil de la tour. Sous 900 px on
   revient a une seule colonne centree — le telephone passe dessous. */
.accueil-duo{display:flex;flex-wrap:wrap;gap:2.5rem;align-items:center;
             justify-content:center}
.accueil-texte{flex:1 1 28rem;max-width:36rem;min-width:0}
.accueil-tel{flex:0 0 auto}
.tel-cadre{position:relative;width:min(330px,70vw);padding:9px;
           background:#0b1220;border:1px solid #24344b;border-radius:2.3rem;
           box-shadow:0 30px 60px -26px rgba(2,8,23,.6)}
.tel-encoche{position:absolute;top:9px;left:50%;transform:translateX(-50%);
             width:38%;height:15px;background:#0b1220;
             border-radius:0 0 11px 11px;z-index:2}
.tel-cadre img{display:block;width:100%;height:auto;border-radius:1.7rem}
.tel-legende{color:var(--doux);font-size:.8rem;text-align:center;margin:.7rem 0 0}
.preparing .menu-lien{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem;
                      justify-content:center}
/* Sous 900 px, la maquette du telephone passait sous le texte : un bloc de
   plus a faire defiler, sur un ecran qui EST deja un telephone. Meme
   raisonnement que `.hero-visuel` plus haut — on la retire au lieu de
   l'empiler (13/08, « pas besoin de defiler quelle que soit la taille »). */
@media(max-width:899.98px){.accueil-tel{display:none}}

@media(min-width:900px){
  .accueil-duo{flex-wrap:nowrap;gap:4rem;text-align:left}
  .accueil-duo .preparing-quoi{margin-left:0;margin-right:0}
  .accueil-duo .menu-lien{justify-content:flex-start}
}

/* DEUX VRAIES COLONNES (13/08, essai C valide par Patrick). Le duo etait
   deux blocs flex centres : le texte plafonnait a 36rem, le telephone
   restait petit, et il restait un trou au milieu pendant que les bords ne
   tombaient sur rien. En grille 1.45/1, chaque colonne occupe sa part, le
   bord gauche du texte tombe sur le logo et le bord droit du telephone sur
   celui de l'en-tete. Sous 900 px, on garde la colonne unique d'avant. */
@media(min-width:900px){
  .accueil-duo{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
               gap:4.5rem;align-items:center}
  .accueil-texte{max-width:none}
  .accueil-tel{justify-self:end}
  /* Le telephone est l'element le plus haut de la page : c'est LUI qui
     decidait s'il fallait defiler. Il se cale donc aussi sur la hauteur de
     l'ecran (30vh de large ~ 63vh de haut), et garde 330 px au maximum. */
  .tel-cadre{width:min(320px,26vh)}
}
.preparing .menu-lien{margin-top:1.5rem}

.btn-lien {
  border: 1px solid #334155;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 99px;
  padding: .5rem 1rem;
  text-decoration: none;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}


  /* LE CHIOT DANS LE MENU AUSSI (06/09/2026, Patrick : « son icone c est
     encore le telescope a beaucoup d endroits »). Le lien du menu est ecrit
     en dur dans 211 pages sous la forme « telescope + Braignak ». On ne
     touche pas 211 fichiers pour un caractere : on eteint le texte du lien
     (font-size:0, ce qui cache le telescope), on redessine le chiot devant,
     et on reecrit le mot Braignak derriere, a sa taille normale.
     L adresse de l image est RELATIVE : elle se cherche a cote de ce
     fichier de style, ce qui marche dans l essai comme en production. */
  .dropdown-item[href="/essaie-braignak"]{font-size:0}
  .dropdown-item[href="/essaie-braignak"]::before{
     content:"";display:inline-block;width:1.15em;height:1.15em;
     background:url(braignak-mascotte.png) center/contain no-repeat;
     vertical-align:-0.28em;margin-right:.4em}
  .dropdown-item[href="/essaie-braignak"]::after{
     content:"Braignak";font-size:1rem;font-weight:inherit;color:inherit}

/* ─── L'ACCUEIL EN PILE : l'image en haut, le texte dessous (06/09/2026) ───
   Demande d'Orel. Avant : une capture d'ecran de telephone posee A COTE du
   texte, sur deux colonnes — et elle disparaissait completement en dessous
   de 900 points de large, c'est-a-dire sur tous les telephones. La nouvelle
   image montre ce que le site raconte : des agents qui se parlent et des
   portes qui refusent. Elle passe donc AU-DESSUS, et sur toutes les tailles
   d'ecran. Les couleurs viennent du theme (--surface2, --doux), jamais
   ecrites en dur : le site a un habit clair et un habit sombre. */
.accueil-pile{display:flex;flex-direction:column;gap:1.6rem;align-items:center;
  text-align:center}
.accueil-visuel{margin:0;width:100%;max-width:820px}
.accueil-visuel img{display:block;width:100%;height:auto;border-radius:.75rem;
  border:1px solid var(--surface2)}
.accueil-visuel figcaption{margin-top:.6rem;font-size:.86rem;color:var(--doux)}
.accueil-pile .accueil-texte{max-width:820px}
@media(min-width:900px){
  .accueil-pile{gap:2rem}
}
/* Le titre tenait dans une colonne etroite ; en pleine largeur il devenait
   enorme. On le ramene a une taille lisible et on borne sa largeur, pour
   que l'oeil n'ait pas a balayer tout l'ecran ligne apres ligne. */
.accueil-pile .preparing-titre{font-size:clamp(1.35rem,2.4vw,2rem);
  line-height:1.25;max-width:44ch;margin-left:auto;margin-right:auto}
.accueil-pile .preparing-quoi{max-width:62ch;margin-left:auto;margin-right:auto}
/* TROP LONG (06/09, Orel) : l'image pleine largeur plus le texte dessous
   poussaient tout le reste sous la ligne de flottaison. On resserre : image
   plus petite, marges reduites, titre et texte compacts. Le but est que le
   premier ecran se lise d'un seul coup d'oeil, sans faire defiler. */
.accueil-pile{gap:.9rem}
.accueil-visuel{max-width:620px}
.accueil-visuel figcaption{margin-top:.35rem;font-size:.8rem}
.accueil-pile .preparing-titre{font-size:clamp(1.15rem,1.9vw,1.55rem);
  line-height:1.25;max-width:52ch;margin:0 auto .35rem}
.accueil-pile .preparing-quoi{font-size:.94rem;line-height:1.5;
  max-width:66ch;margin:0 auto .35rem}
.accueil-pile .preparing-cmd-mini{margin:.25rem auto;font-size:.82rem}
.accueil-pile .preparing-tel{margin:.35rem auto 0}
@media(min-width:900px){
  .accueil-pile{gap:1rem}
  .accueil-visuel{max-width:560px}
}

/* ─── DEUX COLONNES, ALIGNEES SUR LA FOIRE AUX QUESTIONS (06/09, Orel) ───
   « met le texte a droite de l'image » et « aligne tout avec la faq qui est
   en bas ». La foire aux questions vit dans un .wrap de 1140 points : le
   bloc d'accueil prend donc exactement la meme largeur, et ses bords
   tombent pile sur ceux des questions plus bas.
   Empile en une colonne sous 900 points : sur un telephone, deux colonnes
   donneraient deux colonnes trop etroites pour etre lues. */
.accueil-pile{max-width:1140px;margin:0 auto;padding:0 1.15rem;
  text-align:left;align-items:stretch}
.accueil-pile .accueil-texte{max-width:none}
.accueil-pile .preparing-titre,
.accueil-pile .preparing-quoi,
.accueil-pile .preparing-cmd-mini,
.accueil-pile .preparing-tel{max-width:none;margin-left:0;margin-right:0;
  text-align:left}
.accueil-visuel{max-width:none;margin:0}
@media(min-width:900px){
  .accueil-pile{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:2.2rem;align-items:center}
  .accueil-visuel{max-width:none}
  .accueil-pile .preparing-titre{font-size:clamp(1.2rem,1.75vw,1.6rem)}
}
/* Le bloc est deja dans un .wrap qui porte sa marge : le padding en double
   decalait le bord gauche de l'image de quelques points par rapport aux
   questions du dessous. Et le vide sous le bloc poussait les questions hors
   de l'ecran — on le reduit. */
.accueil-pile{padding:0;max-width:none}
.accueil-duo-section,.accueil-pile{margin-bottom:0}
.accueil-pile .preparing-tel{margin-bottom:0}
/* Il restait un vide d'une centaine de points entre le bloc et les
   questions : c'est la marge basse de la section d'accueil. On la reduit
   pour que les questions montent dans le premier ecran. */
.accueil-pile{align-items:start}
section:has(> .wrap > .accueil-pile){padding-top:1.4rem;padding-bottom:1rem}