/* ============================================================================
   site.css — Dronelapse
   Les jetons viennent du thème réel : Acherus Grotesque en titrage, Lato en
   courant, échelle h1 64/40 … h6 24/20, interligne courant 1.8, conteneur
   1224 px, fonds #fff / #f7f7f7 / #1a1a1a. Ce qui change par rapport au
   builder, c'est la mise en page, jamais la charte.
   ========================================================================== */

@layer socle, trame, composants, sombre, pages, adaptatif;

@font-face{font-family:'Acherus';font-weight:400;font-display:swap;
  src:url('/assets/polices/acherus-grotesque-regular.woff2') format('woff2')}
@font-face{font-family:'Acherus';font-weight:500;font-display:swap;
  src:url('/assets/polices/acherus-grotesque-medium.woff2') format('woff2')}
@font-face{font-family:'Acherus';font-weight:700;font-display:swap;
  src:url('/assets/polices/acherus-grotesque-bold.woff2') format('woff2')}

@layer socle {
  :root{
    --titre:'Acherus','Helvetica Neue',Helvetica,Arial,sans-serif;
    --texte:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

    --blanc:#fff; --gris:#f7f7f7; --noir:#1a1a1a; --encre:#000; --encre2:#1d1e20;
    --doux:#4d5055; --pale:#6b6f74; --trait:#e3e3e3; --trait2:#33363b;

    --large:1224px; --marge:clamp(16px,4vw,28px);
    --souffle:clamp(64px,8vw,112px);
    --rayon:999px;      /* boutons en gélule, réglage validé */
    --rayon-bloc:10px;  /* cartes, images, médias */
  }
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0;background:var(--blanc);color:var(--encre);
    font-family:var(--texte);font-size:17px;line-height:1.8;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  img,video,iframe,svg{max-width:100%;display:block}
  img,video{height:auto}
  a{color:inherit}
  h1,h2,h3,h4,h5,h6{
    font-family:var(--titre);font-weight:700;line-height:1.18;letter-spacing:-.005em;
    margin:0;text-wrap:balance;
  }
  h1{font-size:clamp(38px,5.6vw,64px);line-height:1.1}
  h2{font-size:clamp(30px,4.2vw,52px)}
  h3{font-size:clamp(24px,2.8vw,34px)}
  h4{font-size:clamp(20px,2vw,24px)}
  p{margin:0;text-wrap:pretty}
  p + p{margin-top:1.1em}
  .saut{
    position:absolute;left:-9999px;top:0;z-index:200;background:#000;color:#fff;
    padding:12px 20px;border-radius:0 0 10px 0;
  }
  .saut:focus{left:0}
  :focus-visible{outline:2px solid var(--encre);outline-offset:3px}
}

@layer trame {
  .wrap{width:100%;max-width:var(--large);margin:0 auto;padding-inline:var(--marge)}
  /* Rupture de gouttière : le bandeau vidéo occupe toute la largeur. */
  .pleine{width:100%}
  /* Le bandeau garde son rapport d'aspect tant qu'il tient dans l'écran, puis
     se laisse rogner en hauteur. Sans ce plafond, un écran large le fait
     grandir jusqu'à chasser le titre hors de vue. */
  .pleine .media{border-radius:0;max-height:min(46vh,420px);min-height:220px}
  section{padding-block:var(--souffle)}
  section.gris{background:var(--gris)}
  section.noir{background:var(--noir);color:#fff}
  /* Le bleu nuit de sa page chantier. */
  section.fonce{background:#061736;color:#fff}
  section.fonce .sur{color:#9fb0cd}
  section.fonce .tete p,section.fonce p{color:#c8d2e2}
  section.fonce h1,section.fonce h2{color:#fff}
  section.photo{padding-block:var(--souffle);background-size:cover;background-position:center;color:#fff}
  section.photo.serre{padding-block:clamp(44px,5vw,72px)}
  section.noir .fin{border-color:var(--trait2)}
  section.serre{padding-block:clamp(44px,5vw,72px)}
  section.haut0{padding-top:0}

  /* Intertitre : surtitre, titre, chapô. */
  .tete{max-width:76ch;margin-bottom:clamp(36px,4vw,60px)}
  .tete.centre{margin-inline:auto;text-align:center}
  .tete h2,.tete h3{margin-bottom:18px}
  .tete p{color:var(--doux);font-size:clamp(17px,1.6vw,19px)}
  .sur{
    display:block;font-size:13px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--pale);margin-bottom:16px;
  }
  section.noir .sur{color:#8f9399}

  .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,72px);align-items:center}
  .duo.large-gauche{grid-template-columns:1.15fr .85fr}
  .duo.large-droite{grid-template-columns:.85fr 1.15fr}
  .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
  .quatuor{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.5vw,56px)}
  .fin{border-top:1px solid var(--trait);padding-top:24px}
}

@layer composants {
  /* Boutons : rayon 8, padding 40/16, Lato 16. Relevé sur le thème. */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    font-family:var(--texte);font-size:16px;line-height:1.2;
    padding:16px 34px;border-radius:var(--rayon);text-decoration:none;
    border:1px solid transparent;cursor:pointer;white-space:nowrap;
    transition:background-color .2s,color .2s,border-color .2s,transform .12s;
  }
  .btn:active{transform:translateY(1px)}
  .btn-1{background:#000;color:#fff}
  .btn-1:hover{background:var(--encre2)}
  .btn-2{background:transparent;color:#000;border-color:#c9cbcf}
  .btn-2:hover{background:#f0f0f0}
  section.noir .btn-1{background:#fff;color:#000}
  section.noir .btn-1:hover{background:#e4e4e4}
  section.noir .btn-2{color:#fff;border-color:#4b4e53}
  section.noir .btn-2:hover{background:rgba(255,255,255,.08)}
  .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
  .tete.centre .btns{justify-content:center}

  .fleche{
    display:inline-block;font-size:16px;text-decoration:none;
    border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .2s;
  }
  .fleche:hover{opacity:.6}

  /* Média : rapport d'aspect toujours déclaré, jamais de saut de page. */
  .media{position:relative;width:100%;overflow:hidden;background:#0d0e10;border-radius:var(--rayon-bloc)}
  .media > img,.media > video,.media > iframe{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;
  }
  .media.libre{background:transparent;border-radius:0}
  .media.libre > iframe{position:static;width:100%;height:var(--h,700px)}
  /* Seuls les films à lancer au clic portent le bouton ; les vidéos
     d'ambiance démarrent seules et n'affichent rien. */
  .ambiance{cursor:default}
  .lecteur{cursor:pointer}
  .lecteur::after{
    content:"";position:absolute;left:50%;top:50%;width:72px;height:72px;
    transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
    background:rgba(255,255,255,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") 54% 50%/28px no-repeat;
    box-shadow:0 6px 30px rgba(0,0,0,.3);transition:transform .2s;
  }
  .lecteur:hover::after{transform:translate(-50%,-50%) scale(1.07)}
  .lecteur.joue{cursor:default}
  .lecteur.joue::after{display:none}
  .legende{font-size:14.5px;color:var(--doux);margin-top:16px}
  section.noir .legende{color:#9aa0a6}

  /* Liste à coche. */
  .coches{list-style:none;margin:0;padding:0}
  .coches li{position:relative;padding:0 0 12px 30px;color:var(--doux)}
  .coches li::before{
    content:"";position:absolute;left:2px;top:11px;width:12px;height:6px;
    border-left:2px solid var(--encre);border-bottom:2px solid var(--encre);
    transform:rotate(-45deg);
  }
  .coches li.repris{color:var(--pale)}
  .coches li.repris::before{border-color:var(--pale)}
  section.noir .coches li::before{border-color:#fff}
  .coches.deux{columns:2;column-gap:44px}

  /* Prix. */
  .prix{font-family:var(--titre);font-weight:700;font-size:clamp(30px,3.4vw,42px);line-height:1;font-variant-numeric:tabular-nums}
  .prix small{font-family:var(--texte);font-weight:400;font-size:15px;color:var(--doux);display:block;margin-top:8px}
  .prix .apd{display:block;font-family:var(--texte);font-weight:400;font-size:14px;color:var(--doux);margin-bottom:4px}

  /* Bandeau d'héritage entre paliers. */
  .comprend{
    display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
    margin:0 0 26px;padding:14px 20px;border-radius:12px;
    background:rgba(0,0,0,.045);font-size:15.5px;color:var(--doux);
  }
  .comprend b{color:var(--encre);font-weight:700}
  .comprend .badge{
    font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:#fff;background:var(--encre);padding:4px 11px;border-radius:99px;
  }

  /* FAQ en <details> natif : lisible par les moteurs, sans script. */
  .faq{max-width:900px;border-top:1px solid var(--trait)}
  .faq details{border-bottom:1px solid var(--trait)}
  .faq summary{
    font-family:var(--titre);font-weight:700;font-size:clamp(18px,1.8vw,21px);
    line-height:1.4;padding:24px 46px 24px 0;cursor:pointer;list-style:none;position:relative;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:"";position:absolute;right:8px;top:32px;width:11px;height:11px;
    border-right:2px solid var(--encre);border-bottom:2px solid var(--encre);
    transform:rotate(45deg);transition:transform .2s;
  }
  .faq details[open] summary::after{transform:rotate(-135deg);top:37px}
  .faq .rep{padding:0 40px 26px 0;color:var(--doux)}
  .faq .rep a{color:var(--encre)}

  /* Cartes. Le builder n'en avait pas ; le code, si. */
  .carte{
    border:1px solid var(--trait);border-radius:var(--rayon-bloc);padding:28px;background:var(--blanc);
    display:flex;flex-direction:column;gap:12px;
    transition:border-color .2s,transform .2s,box-shadow .2s;
  }
  a.carte{text-decoration:none}
  a.carte:hover{border-color:var(--encre);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.07)}
  .carte.plate{border:0;background:transparent;padding:0;border-top:1px solid var(--trait);padding-top:24px;border-radius:0}
  .carte .n{font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--pale)}
  .carte p{color:var(--doux);font-size:16px}
  .carte img{width:100%;border-radius:10px;aspect-ratio:16/10;object-fit:cover}
  section.noir .carte{background:transparent;border-color:var(--trait2)}
  section.noir .carte p{color:#a9acb1}

  /* Chiffres de preuve. */
  .chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
  .chiffres .n{font-family:var(--titre);font-weight:700;font-size:clamp(34px,4.4vw,54px);line-height:1;font-variant-numeric:tabular-nums}
  .chiffres p{font-size:15.5px;color:var(--doux);margin-top:10px}

  /* Mosaïque : maçonnerie, comme la galerie du thème. */
  .mosaique{columns:3;column-gap:16px}
  .mosaique img{width:100%;margin:0 0 16px;break-inside:avoid;border-radius:10px}

  /* Tableau de tarifs, lisible par les moteurs comme par les visiteurs. */
  .tw{overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-size:16px}
  th,td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--trait)}
  th{font-family:var(--titre);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--pale)}
  td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
  td.f{font-family:var(--titre);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

  /* Révélation au défilement, reprise du thème : scale .9, 0.65 s, ease. */
  .rev{opacity:0;transform:scale(.94);transition:opacity .6s ease,transform .6s ease}
  .rev.vu{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}
}

@layer composants {
  /* En-tête */
  .haut{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
  .haut.colle{border-color:var(--trait)}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
  .nav .logo img{width:150px}
  .nav ul{list-style:none;margin:0;padding:0}
  .nav > ul{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px)}
  .nav a{font-size:16px;text-decoration:none;transition:color .2s}
  .nav > ul a:hover{color:#7a7d82}
  .nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1.5px}
  .nav .cta{background:#000;color:#fff;padding:11px 24px;border-radius:var(--rayon)}
  .nav .cta:hover{background:var(--encre2);color:#fff}
  .pli{position:relative}
  .rang{display:inline-flex;align-items:center;gap:4px}
  /* Le libellé d'un dossier : même allure qu'un lien, mais c'est un bouton. */
  .libelle{background:none;border:0;padding:0;margin:0;cursor:pointer;
    font-family:var(--texte);font-size:16px;color:#000;transition:color .2s}
  .libelle:hover{color:#7a7d82}
  .rang.actif > a{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1.5px}
  .chev{background:none;border:0;padding:2px;cursor:pointer;color:inherit;display:flex}
  .chev svg{transition:transform .2s}
  .pli:hover .chev svg,.pli.ouvert .chev svg{transform:rotate(180deg)}
  .pli::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
  .sous{
    position:absolute;top:calc(100% + 14px);left:-18px;z-index:70;
    display:flex;flex-direction:column;min-width:330px;padding:8px;
    background:#fff;border:1px solid var(--trait);border-radius:12px;
    box-shadow:0 20px 48px rgba(0,0,0,.14);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .16s,transform .16s,visibility .16s;
  }
  .droite .sous{left:auto;right:-18px}
  .pli:hover .sous,.pli:focus-within .sous,.pli.ouvert .sous{opacity:1;visibility:visible;transform:none}
  .sous a{display:block;padding:11px 14px;border-radius:8px;line-height:1.45}
  .sous a:hover{background:var(--gris)}
  .sous .t{display:block;font-weight:700;font-size:15.5px}
  .sous .d{display:block;font-size:13px;color:var(--pale)}
  .burger{display:none;background:none;border:0;padding:6px;cursor:pointer;color:#000}

  /* Pied */
  .pied{background:var(--noir);color:#fff;padding:clamp(56px,6vw,84px) 0 36px}
  .pied a{color:#c9ccd1;text-decoration:none}
  .pied a:hover{color:#fff}
  .pied-haut{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(32px,4vw,56px)}
  .pied img{width:150px}
  .pied p{color:#9aa0a6;font-size:15.5px;margin-top:18px;max-width:40ch}
  .pied .tel a{font-family:var(--titre);font-weight:700;font-size:20px;color:#fff}
  .pied h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-family:var(--texte);font-weight:700;margin-bottom:16px}
  .pied ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15.5px}
  .pied-geo{margin-top:clamp(40px,5vw,64px);padding-top:30px;border-top:1px solid var(--trait2)}
  .pied-geo p{max-width:none;margin:0 0 22px;font-size:15px;line-height:2}
  .pied-geo h2{margin-top:6px}
  .pied-bas{
    margin-top:30px;padding-top:22px;border-top:1px solid var(--trait2);
    display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14.5px;color:#9aa0a6;
  }
}


/* ── Fonds sombres ───────────────────────────────────────────────────────────
   Déclaré APRÈS « composants » : sans ça, .coches li{color:var(--doux)} gagnait
   et le texte gris foncé restait illisible sur les sections noires et photo. */
@layer sombre {
  section.noir,section.photo,section.fonce{color:#fff}
  section.noir :where(p,li,td,figcaption,.doux,.legende,.carte p),
  section.photo :where(p,li,td,figcaption,.doux,.legende,.carte p),
  section.fonce :where(p,li,td,figcaption,.doux,.legende,.carte p){color:#d7d9dc}
  section.noir :where(h1,h2,h3,h4,h5,h6,strong,b,.fleche,.prix),
  section.photo :where(h1,h2,h3,h4,h5,h6,strong,b,.fleche,.prix),
  section.fonce :where(h1,h2,h3,h4,h5,h6,strong,b,.fleche,.prix){color:#fff}
  section.noir :where(.sur,.n),
  section.photo :where(.sur,.n),
  section.fonce :where(.sur,.n){color:#b6b9be}
  section.noir .coches li::before,
  section.photo .coches li::before,
  section.fonce .coches li::before{border-color:#fff}
  section.noir .carte,section.photo .carte,section.fonce .carte{background:transparent;border-color:rgba(255,255,255,.22)}
  section.noir .fin,section.photo .fin,section.fonce .fin{border-color:rgba(255,255,255,.22)}
  section.noir .btn-1,section.photo .btn-1,section.fonce .btn-1{background:#fff;color:#000}
  section.noir .btn-1:hover,section.photo .btn-1:hover,section.fonce .btn-1:hover{background:#e2e2e2}
  section.noir .btn-2,section.photo .btn-2,section.fonce .btn-2{color:#fff;border-color:rgba(255,255,255,.42)}
  section.noir .btn-2:hover,section.photo .btn-2:hover,section.fonce .btn-2:hover{background:rgba(255,255,255,.12)}
  section.noir table th,section.photo table th,section.fonce table th{color:#b6b9be}
  section.noir table td,section.photo table td,section.fonce table td{border-color:rgba(255,255,255,.18)}
}

@layer adaptatif {
  @media(max-width:1000px){
    .duo,.duo.large-gauche,.duo.large-droite{grid-template-columns:1fr}
    .trio,.chiffres{grid-template-columns:1fr 1fr}
    .pied-haut{grid-template-columns:1fr 1fr}
    .mosaique{columns:2}
  }
  @media(max-width:760px){
    .trio,.chiffres,.quatuor{grid-template-columns:1fr}
    .coches.deux{columns:1}
    .mosaique{columns:1}
    .pied-haut{grid-template-columns:1fr}
    .btns .btn{flex:1 1 auto}
    .faq summary{padding-right:38px}

    .burger{display:flex}
    .nav{flex-wrap:wrap;min-height:64px}
    .nav > ul{
      display:none;order:3;flex-basis:100%;flex-direction:column;align-items:stretch;
      gap:0;margin:0 calc(var(--marge) * -1);border-top:1px solid var(--trait);
    }
    .nav.ouvert > ul{display:flex}
    .nav > ul > li{border-bottom:1px solid var(--trait)}
    .nav > ul > li > a,.rang > a{display:block;padding:15px var(--marge)}
    .nav .cta{margin:14px var(--marge);text-align:center}
    .rang{display:flex;width:100%}
    .rang > a{flex:1 1 auto}
    .chev{flex:0 0 auto;width:58px;justify-content:center;border-left:1px solid var(--trait)}
    .sous{
      position:static;min-width:0;padding:0 0 6px;background:var(--gris);
      border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;
      transform:none;display:none;
    }
    .pli:hover .sous,.pli:focus-within .sous{display:none}
    .pli.ouvert .sous{display:flex}
    .pli::after{display:none}
    .sous a{padding:12px var(--marge) 12px calc(var(--marge) + 16px);border-radius:0}
  }
}

@layer composants {
  /* Fil d'Ariane. Présent seulement sur les pages hors menu, où il est la
     seule remontée d'un cran. Discret par construction : il oriente, il
     n'attire pas. */
  .ariane{background:var(--gris);padding-top:22px;font-size:14px}
  .ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:0 8px;margin:0;padding:0}
  .ariane li{color:var(--doux)}
  .ariane li + li::before{content:"›";margin-right:8px;color:var(--pale)}
  .ariane a{color:var(--doux);text-decoration:none;border-bottom:1px solid transparent}
  .ariane a:hover{color:var(--encre);border-bottom-color:currentColor}
  .ariane [aria-current]{color:var(--encre)}
  /* La section qui suit ne doit pas rouvrir une gouttière au-dessus du titre. */
  .ariane + section.gris{padding-top:26px}
}

@layer composants {
  /* Grille de tarifs. Les intitulés de ligne sont des <th> pour l'accessibilité,
     mais ils se lisent comme des cellules : sans la remise à plat, ils prennent
     le style des en-têtes de colonne et la grille devient illisible. */
  table.tarifs tbody th{
    font-family:var(--texte);font-weight:400;font-size:16px;letter-spacing:0;
    text-transform:none;color:var(--encre);
  }
  table.tarifs caption{text-align:left;margin:0 0 14px;max-width:80ch}
  table.tarifs thead th:not(:first-child),table.tarifs td{text-align:right}
  table.tarifs thead th:nth-child(2),table.tarifs td.n{text-align:left}
  @media (max-width:760px){
    table.tarifs{font-size:15px}
    table.tarifs th,table.tarifs td{padding:14px 12px}
  }
}

@layer composants {
  /* Paragraphe explicatif autonome, celui qui ferme une section : mesure de
     lecture courte, bloc centré sur la grille, texte à gauche. Sans ça il
     s'étale sur toute la largeur et se lit comme un pavé posé de travers sous
     un contenu, lui, centré. */
  .legende.note{max-width:74ch;margin:28px auto 0}
  .legende.note.centree{text-align:center}
  .tete.centre .legende.note{text-align:center}

  /* La FAQ était calée à gauche sous un titre centré. */
  .faq{margin-inline:auto}

  /* La grille de tarifs s'aligne sur le bord de la section, pas sur le
     rembourrage de ses cellules : sinon la légende au-dessus et la note en
     dessous partent 18 px avant la première colonne. */
  table.tarifs th:first-child,table.tarifs td:first-child{padding-left:0}
  table.tarifs th:last-child,table.tarifs td:last-child{padding-right:0}
}

@layer composants {
  /* Encart pleine largeur : un contenu qui se suffit à lui-même, posé bord à
     bord. Son iframe fixe sa propre hauteur, on ne lui en impose aucune. */
  .encart{width:100%;overflow:hidden}
  .encart iframe{display:block;width:100%;border:0}

  /* Mosaïque : les images se révèlent l'une après l'autre, pas d'un bloc.
     Le décalage se lit comme un feuilletage, c'est ce que faisait le thème. */
  .mosaique img{transition-delay:calc(var(--i,0) * 70ms)}
}

@layer composants {
  /* Bandeau du client, en tête de son espace chantier : une bande sombre et
     le logo à sa taille. Étiré sur toute la largeur, le visuel écrasait la
     page qu'il introduit. */
  .bandeau-client{padding-block:clamp(20px,2.4vw,32px)}
  .bandeau-client .wrap{display:flex;justify-content:center}
  .bandeau-client img{width:190px;height:auto;display:block}
}

@layer composants {
  /* Formulaire. Les champs portaient leur style en ligne, ce qui rendait
     impossible d'y ajouter un état de focus ou d'erreur. */
  .formulaire input,.formulaire textarea{
    font:inherit;padding:13px 15px;border:1px solid var(--trait);
    border-radius:10px;background:#fff;color:var(--encre);width:100%;
    transition:border-color .18s,box-shadow .18s;
  }
  .formulaire textarea{resize:vertical;min-height:140px}
  .formulaire input:focus-visible,.formulaire textarea:focus-visible{
    outline:0;border-color:var(--encre);box-shadow:0 0 0 3px rgba(0,0,0,.08);
  }
  .formulaire input:user-invalid,.formulaire textarea:user-invalid{border-color:#b42318}
  .formulaire button[disabled]{opacity:.55;cursor:progress}

  /* Le pot de miel doit être invisible sans être display:none : certains
     robots ignorent les champs masqués de cette façon, et un lecteur d'écran
     ne doit pas l'annoncer non plus. */
  .pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  .reponse{margin:0;font-size:15px;line-height:1.6}
  .reponse.succes{color:#0f7b46;font-weight:600}
  .reponse.erreur{color:#b42318;font-weight:600}
}

@layer composants {
  /* ── Espace chantier client ──────────────────────────────────────────────
     Gabarit relevé sur /residence-offenbach-copy le 24/08/2026. Les hauteurs
     et les couleurs sont celles du builder, pas des approximations : le
     client doit retrouver sa page telle qu'il la connaît. */
  .cl-bandeau{background:var(--fond,#e8eff1);min-height:var(--haut,231px);
              display:grid;place-items:center;padding:24px 0}
  /* Le fond des logos clients n'est pas uni : ce sont des JPEG dont le fond
     va du blanc à une teinte proche du bandeau. Aucune couleur de bandeau ne
     peut donc coïncider, et le carré du fichier se voit. Le mode « darken »
     règle le problème à la racine : tout ce qui est plus clair que le
     bandeau devient le bandeau, tout ce qui est plus sombre, le dessin du
     logo, reste intact. À basculer sur « normal » si un client a un bandeau
     sombre avec un logo clair. */
  .cl-bandeau img{width:var(--logo,231px);height:auto;max-height:calc(var(--haut,231px) - 32px);
                  object-fit:contain;display:block;mix-blend-mode:var(--fusion,normal)}

  .cl-titre{background:#fff;min-height:130px;display:grid;place-items:center;padding:21px 0}
  .cl-titre h1{font-size:clamp(28px,4vw,44px);text-align:center;margin:0}

  /* Le dégradé animé des blocs de contenu : 45°, #e6e7ea vers #fcfbfb. */
  .cl-fond{
    background:linear-gradient(45deg,rgb(230,231,234),rgb(252,251,251),rgb(230,231,234));
    background-size:300% 300%;animation:cl-glisse 18s ease-in-out infinite;padding:16px 0;
  }
  @keyframes cl-glisse{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
  @media (prefers-reduced-motion:reduce){.cl-fond{animation:none}}

  .cl-film{width:min(696px,100%);margin:0 auto;border-radius:10px;overflow:hidden;background:#0d0e10}
  .cl-film iframe{width:100%;height:100%;border:0;display:block}
  .cl-legende{width:min(696px,100%);margin:16px auto 0;font-size:18px;color:var(--doux)}

  .cl-espace{padding-bottom:32px}
  .cl-espace .encart{width:100%;overflow:hidden}
  .cl-espace .encart iframe{display:block;width:100%;border:0}

  .cl-signature{background:#fff;min-height:55px;display:grid;place-items:center;padding:14px 0}
  .cl-signature img{width:207px;height:auto;display:block;opacity:.85;transition:opacity .2s}
  .cl-signature a:hover img{opacity:1}

  @media (max-width:760px){
    .cl-bandeau{min-height:var(--haut-mob,107px);padding:16px 0}
    .cl-bandeau img{width:min(var(--logo-mob,var(--logo,140px)),74vw);
                    max-height:calc(var(--haut-mob,107px) - 24px)}
  }
}

@layer composants {
  /* Bandeau de consentement. Discret mais pas caché : il apparaît en bas,
     laisse la page lisible, et propose refus et acceptation avec le même
     poids visuel. Un refus plus difficile qu'une acceptation n'est pas un
     consentement libre. */
  .consent{
    position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
    max-width:600px;margin-inline:auto;background:#fff;color:var(--encre);
    border:1px solid var(--trait);border-radius:12px;padding:16px 18px;
    box-shadow:0 14px 40px rgba(0,0,0,.12);
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease;
  }
  .consent.vu{opacity:1;transform:none}
  .consent p{margin:0;flex:1 1 240px;font-size:14px;line-height:1.6;color:var(--doux)}
  .consent a{color:var(--encre)}
  .consent-btns{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
  .consent-btns .btn{padding:9px 20px;font-size:14px}
  @media (prefers-reduced-motion:reduce){.consent{transition:none}}
}