/* ═══════════════════════════════════════════════════════════════════
   POLICES — hébergées par nos soins (04/09/2026)

   Elles étaient chargées depuis fonts.googleapis.com, ce qui transmettait
   l'adresse IP de chaque visiteur à Google avant même qu'il ait lu une
   ligne. Les fichiers sont désormais servis depuis accespub.fr : aucun
   appel à un tiers, rien à déclarer de ce côté dans la politique de
   confidentialité, et une page qui s'affiche plus vite (deux résolutions
   DNS et deux poignées de main TLS en moins).

   Ce sont des polices VARIABLES : un seul fichier couvre toutes les
   graisses de la famille (400 → 800 pour Inter). Le navigateur ne
   télécharge que les jeux de caractères dont la page a besoin, grâce aux
   « unicode-range » ci-dessous — un texte français n'appelle presque
   jamais le fichier « latin-ext ».

   « font-display: swap » : le texte s'affiche immédiatement dans la police
   de repli, puis bascule. Mieux vaut un texte lisible tout de suite qu'une
   page blanche pendant le chargement.

   Licences : Inter et Newsreader sont sous SIL Open Font License 1.1,
   qui autorise explicitement l'auto-hébergement. Voir fonts/LICENCES.txt.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/inter-normal-latin.woff2') 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:'Newsreader';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/newsreader-italic-latin.woff2') 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:'Newsreader';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/newsreader-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/newsreader-normal-latin.woff2') 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{
    --rouge:#FF495C;
    --rouge-clair:#FFD7DC;
    --encre:#36373C;          /* gris encre, pas du noir pur */
    --gris:#646569;
    --gris-clair:#F3F3F2;
    --rose-pale:#FFF1F2;     /* voile rosé (teinté de la signature) — revert possible */
    --bleu-pale:#EAF3FF;     /* voile bleu très pâle — test */
    --wash:var(--rose-pale); /* ← bascule ici : --rose-pale ou --bleu-pale */
    --ligne:rgba(54,55,60,.13);
    --blanc:#FFFFFF;
    --display:'Newsreader',Georgia,serif;   /* titres éditoriaux (serif) */
    --titre:'Inter',Arial,sans-serif;
    --corps:'Inter',Arial,sans-serif;
    --mono:'Inter',Arial,sans-serif;        /* labels techniques = Inter capitales espacées */
    --maxw:1140px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--corps);color:var(--encre);background:var(--blanc);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;}
  h1,h2{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.005em;}
  h3{font-family:var(--display);font-weight:500;line-height:1.15;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
  .em{color:var(--rouge);}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:14px;}

  /* Header */
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne);}
  .nav{display:flex;align-items:center;gap:24px;height:96px;transition:height .25s ease;}
  header.scrolled .nav{height:66px;}
  .logo-link{display:inline-flex;align-items:center;}
  .logo-img{height:80px;width:auto;display:none;transition:height .25s ease;}
  header.scrolled .logo-img{height:48px;}
  .logo-link.hasimg .logo-img{display:block;}
  .logo-link.hasimg .logo-txt{display:none;}
  .logo-txt{font-family:var(--titre);font-weight:800;font-size:23px;letter-spacing:.02em;display:flex;flex-direction:column;line-height:1;}
  .logo-txt b{color:var(--rouge);} .logo-txt em{color:var(--gris);font-style:normal;}
  .logo-txt small{font-family:var(--corps);font-weight:500;font-size:10px;letter-spacing:.22em;color:var(--gris);margin-top:3px;}
  nav.menu{display:flex;gap:20px;margin-left:auto;font-size:15px;font-weight:500;font-family:var(--corps);}
  nav.menu a{padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap;}
  nav.menu a:hover{border-color:var(--rouge);}

  .btn{display:inline-block;font-family:var(--corps);font-weight:600;font-size:15px;padding:13px 26px;border-radius:999px;border:1.5px solid var(--rouge);background:var(--rouge);color:#fff;transition:.15s;cursor:pointer;}
  .btn:hover{background:var(--encre);border-color:var(--encre);}
  .btn.ghost{background:transparent;color:var(--encre);border-color:var(--encre);}
  .btn.ghost:hover{background:var(--rouge);border-color:var(--rouge);color:#fff;}
  .header-cta{margin-left:8px;}

  /* ===== Bouton du menu mobile =====
     Masqué par défaut : il n'apparaît que sous 861 px, là où la barre de
     navigation est remplacée par un panneau déroulant. */
  .burger{display:none;margin-left:auto;width:44px;height:44px;padding:0;
    border:1px solid var(--ligne);border-radius:10px;background:#fff;cursor:pointer;
    align-items:center;justify-content:center;flex-direction:column;gap:5px;}
  .burger:hover{border-color:var(--rouge);}
  .burger span{display:block;width:20px;height:2px;background:var(--encre);
    border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
  /* Le lien de devis du panneau : invisible tant qu'on est en barre. */
  .menu-devis{display:none;}

  /* Le menu compte sept entrées depuis le 06/09/2026 (ajout de « Catalogue »).
     Mesures à l'appui : la bande utile plafonne à 1 084 px et l'en-tête en
     réclame 1 052 après resserrement des gouttières. Ça tient — mais de peu.
     Entre 1 001 et 1 140 px, on resserre encore un cran plutôt que de laisser
     le bouton de devis sortir de l'écran.
     En dessous de 1 001 px, ce n'est plus une question de réglage : sept
     entrées ne rentrent pas. On passe au panneau déroulant (voir plus bas),
     qui les contient toutes et présente le devis en bouton. */
  @media(min-width:1001px) and (max-width:1140px){
    nav.menu{gap:15px;font-size:14px;}
    .nav{gap:18px;}
    .nav .header-cta{padding:10px 17px;font-size:14px;white-space:nowrap;}
    .nav .logo-img{height:66px;}
  }
  /* Mesuré à 1010 px : 984 px nécessaires pour 954 disponibles. Le bas de la
     plage a besoin d'un cran de plus, sinon le bouton de devis sort. */
  @media(min-width:1001px) and (max-width:1060px){
    nav.menu{gap:11px;font-size:13.5px;}
    .nav{gap:14px;}
    .nav .header-cta{padding:9px 14px;font-size:13.5px;}
    .nav .logo-img{height:56px;}
  }

  /* Hero */
  .hero{padding:64px 0 56px;}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
  .hero h1{font-family:var(--corps);font-weight:800;font-size:clamp(36px,5vw,60px);letter-spacing:-.02em;line-height:1.05;}
  .hero h1 em{font-family:var(--display);font-style:italic;font-weight:400;color:var(--gris);letter-spacing:0;}
  .hero p.lead{font-size:19px;color:var(--gris);margin:22px 0 30px;max-width:34em;border-left:3px solid var(--rouge);padding-left:20px;}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
  .chips{display:flex;gap:10px;flex-wrap:wrap;}
  .chip{font-size:14px;font-weight:500;color:var(--encre);border:1px solid var(--ligne);padding:9px 18px;border-radius:999px;font-family:var(--corps);}

  /* ===== Curseur d'impact — interactif ===== */
  .imp{border:1px solid var(--ligne);background:#fff;padding:28px 30px;border-radius:20px;box-shadow:0 12px 34px rgba(54,55,60,.07);}
  .imp-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;}
  .imp-top .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);}
  .imp-badge{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--gris);border:1px solid var(--ligne);padding:4px 12px;border-radius:999px;white-space:nowrap;transition:.2s;}
  .imp-badge.win{color:#fff;background:var(--rouge);border-color:var(--rouge);}
  .imp-hint{font-size:13px;color:var(--gris);margin-bottom:18px;}
  .imp-hint b{color:var(--encre);}
  .imp-row{margin:18px 0;}
  .imp-row .lab{display:flex;justify-content:space-between;align-items:baseline;}
  .imp-row .lab .name{font-family:var(--display);font-weight:500;font-size:18px;}
  .imp-status{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);}
  .imp-row.mastered .imp-status{color:var(--rouge);}
  .imp-track{position:relative;height:30px;display:flex;align-items:center;margin:6px 0 2px;}
  .imp-zone{position:absolute;top:50%;transform:translateY(-50%);height:10px;background:var(--rouge-clair);border:1px dashed var(--rouge);z-index:1;}
  input[type=range].rng{-webkit-appearance:none;appearance:none;width:100%;height:8px;background:#e6e6e4;outline:none;position:relative;z-index:2;cursor:grab;}
  input[type=range].rng:active{cursor:grabbing;}
  input[type=range].rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--rouge);border:3px solid #fff;cursor:grab;box-shadow:0 0 0 1px var(--ligne);}
  input[type=range].rng::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--rouge);border:3px solid #fff;cursor:grab;}
  .imp-row:not(.mastered) input[type=range].rng::-webkit-slider-thumb{animation:nudge 1.4s ease-in-out infinite;}
  .imp-row:not(.mastered) input[type=range].rng::-moz-range-thumb{animation:nudge 1.4s ease-in-out infinite;}
  @keyframes nudge{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}
  .imp-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--gris);}
  .imp-feedback{margin-top:22px;border-top:1px solid var(--ligne);padding-top:16px;}
  .imp-count{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin-bottom:10px;}
  .imp-count b{color:var(--rouge);}
  .imp-feedback ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
  .imp-feedback li{display:flex;gap:10px;font-size:14px;line-height:1.45;}
  .imp-feedback li .dot{flex:0 0 auto;width:9px;height:9px;margin-top:6px;background:var(--rouge);}
  .imp-feedback li.ok .dot{background:var(--encre);}
  .imp-win{font-size:15px;line-height:1.5;}
  .imp-win strong{color:var(--rouge);}
  .imp-win a{display:inline-block;margin-top:10px;font-weight:600;color:var(--rouge);border-bottom:1px solid var(--rouge);}

  /* Sections */
  section.band{padding:64px 0;border-top:1px solid var(--ligne);}
  .band.alt{background:var(--wash);}
  h2.sec{font-size:clamp(28px,3.4vw,40px);margin-bottom:8px;max-width:18ch;}
  .sec-head{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:end;margin-bottom:38px;}
  .sub{color:var(--gris);max-width:40ch;}
  .sec-head .sub{border-left:3px solid var(--rouge);padding-left:18px;}
  .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px;}

  /* Cartes Notre approche (numérotées) */
  .ncard{background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:28px;}
  .ncard .num{font-family:var(--mono);font-size:13px;color:var(--gris);margin-bottom:18px;}
  .ncard h3{font-size:22px;margin-bottom:12px;}
  .ncard p{font-size:15px;color:var(--gris);}

  /* Cartes Ce que nous faisons (produit) */
  .prod{background:#fff;border:1px solid var(--ligne);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;}
  .prod .ph{height:140px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--ligne);
    background:var(--rose-pale);color:var(--rouge);}
  .prod .ph svg{width:46px;height:46px;}
  /* Une photo déposée recouvre l'icône de charte, comme dans .photo-slot.
     Sans fichier, l'attribut onerror retire l'<img> et l'icône reste : le site
     n'affiche jamais d'image cassée. Même principe que le logo et le portrait
     du hero. */
  .prod .ph{position:relative;}
  .prod .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  /* Invisible tant que le fichier n'est pas chargé : sans ça, une photo encore
     absente recouvrait l'icône d'un rectangle vide (et, selon le navigateur,
     d'une vignette « image cassée »). La classe « ok » est posée par onload.
     opacity plutôt que display:none, qui empêcherait le chargement différé. */
  .prod .ph img, .photo-slot img{opacity:0;transition:opacity .25s ease;}
  .prod .ph img.ok, .photo-slot img.ok{opacity:1;}
  /* Quand la photo est là, le repère disparaît vraiment — pas seulement
     recouvert. Sinon un lecteur d'écran annoncerait « Photo à venir » devant
     une photo bien présente. `:has()` n'est pas indispensable : sans lui, le
     texte reste simplement masqué derrière l'image. */
  .photo-slot:has(img.ok) svg,
  .photo-slot:has(img.ok) .ps-t,
  .photo-slot:has(img.ok) small{display:none;}
  .photo-slot:has(img.ok){border-style:solid;border-color:var(--ligne);padding:0;}
  .prod .ph:has(img.ok) svg{display:none;}

  /* Illustration dans le fil du texte (pages Origine, Contact). Le bloc
     entier disparaît si le fichier manque — pas de cadre vide, pas de légende
     orpheline. */
  .prose .illus{margin:22px 0 26px;}
  .prose .illus img{width:100%;height:auto;max-height:420px;object-fit:cover;
    border-radius:16px;display:block;opacity:0;transition:opacity .25s ease;}
  .prose .illus img.ok{opacity:1;}
  .prose .illus figcaption{font-size:13px;color:var(--gris);margin-top:8px;
    font-family:var(--corps);}
  .prod .ph .lbl{font-family:var(--mono);font-size:11px;color:var(--gris);background:rgba(255,255,255,.75);padding:4px 9px;}
  .prod .body{padding:22px;display:flex;flex-direction:column;flex:1;}
  .prod h3{font-size:20px;margin-bottom:8px;}
  .prod p{font-size:14px;color:var(--gris);flex:1;}
  .prod .voir{margin-top:16px;font-family:var(--mono);font-weight:600;font-size:13px;color:var(--rouge);}
  .cat-note{margin-top:20px;font-family:var(--mono);font-size:13px;color:var(--gris);}
  .conf{background:#FFE3E7;color:#A32230;padding:1px 7px;font-size:.9em;}

  /* Pour qui */
  .seg{display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid var(--ligne);border-radius:16px;padding:24px 20px;transition:.15s;}
  .seg:hover{border-color:var(--rouge);border-top-color:var(--rouge);transform:translateY(-2px);}
  .seg .seg-t{font-family:var(--display);font-weight:500;font-size:19px;}
  .seg .seg-d{font-family:var(--corps);font-weight:500;font-size:13px;color:var(--gris);margin-top:6px;}
  .seg .seg-go{margin-top:14px;font-weight:600;font-size:22px;line-height:1;color:var(--rouge);transition:.15s;}
  .seg:hover .seg-go{transform:translateX(4px);}
  .seg.autre{border-style:dashed;border-color:var(--rouge);background:var(--rose-pale);}
  .seg.autre .seg-t{color:var(--rouge);}

  /* FAQ */
  .faq{max-width:820px;}
  .faq details{border-top:1px solid var(--ligne);}
  .faq details:last-child{border-bottom:1px solid var(--ligne);}
  .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:20px 0;font-family:var(--display);font-weight:500;font-size:20px;color:var(--encre);}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary .pm{flex:0 0 auto;color:var(--rouge);font-family:var(--corps);font-weight:600;font-size:24px;line-height:1;transition:.15s;}
  .faq details[open] summary .pm{transform:rotate(45deg);}
  .faq .ans{padding:0 0 22px;color:var(--gris);font-size:16px;max-width:64ch;}

  /* ===== Documents légaux dépliés (CGV) =====
     Vingt articles de conditions de vente en un seul bloc de texte, personne
     ne les lit. Dépliés, on trouve l'article qu'on cherche.
     Même mécanique que la FAQ, mais réglée pour du texte long : le titre est
     plus discret, et le contenu garde la typographie de .prose au lieu du
     gris atténué des réponses de FAQ — un contrat doit rester lisible. */
  .legal-plie{max-width:820px;margin-top:24px;}
  .legal-plie details{border-top:1px solid var(--ligne);}
  .legal-plie details:last-child{border-bottom:1px solid var(--ligne);}
  .legal-plie summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:14px;
    padding:16px 0;font-family:var(--display);font-weight:500;font-size:18px;color:var(--encre);}
  .legal-plie summary::-webkit-details-marker{display:none;}
  .legal-plie summary:hover{color:var(--rouge);}
  /* Le numéro d'article, en chiffres tabulaires pour que les titres s'alignent. */
  .legal-plie summary .num{flex:0 0 2.2em;color:var(--gris);font-family:var(--mono);
    font-size:14px;font-variant-numeric:tabular-nums;}
  .legal-plie summary .pm{margin-left:auto;flex:0 0 auto;color:var(--rouge);
    font-family:var(--corps);font-weight:600;font-size:22px;line-height:1;transition:.15s;}
  .legal-plie details[open] summary .pm{transform:rotate(45deg);}
  .legal-plie details[open] summary{color:var(--rouge);}
  .legal-plie .corps{padding:0 0 24px;}
  /* Le contenu est décalé sous le titre, aligné sur lui et non sur le numéro. */
  .legal-plie .corps{padding-left:calc(2.2em + 14px);}
  .legal-plie .corps p{margin:0 0 14px;color:#4A4B51;font-size:15.5px;line-height:1.65;}
  .legal-plie .corps ul,.legal-plie .corps ol{margin:0 0 14px 20px;}
  .legal-plie .corps li{margin:6px 0;color:#4A4B51;font-size:15.5px;line-height:1.6;}
  .legal-plie .corps strong{color:var(--encre);}
  .legal-plie .corps a{color:var(--rouge);border-bottom:1px solid var(--rouge);}
  @media(max-width:640px){
    /* Sur téléphone, le décalage mangerait la largeur utile. */
    .legal-plie .corps{padding-left:0;}
    .legal-plie summary{font-size:16.5px;}
  }

  /* CTA final — encart surélevé */
  .cta-final{background:var(--wash);border-top:1px solid var(--ligne);padding:76px 22px;}
  .cta-final .wrap{padding:0;}
  .cta-panel{max-width:680px;margin:0 auto;background:#fff;border:1px solid var(--ligne);border-radius:24px;padding:48px 40px;text-align:center;box-shadow:0 16px 46px rgba(54,55,60,.08);position:relative;overflow:hidden;}
  .cta-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--rouge);}
  .cta-panel .eyebrow{display:block;margin-bottom:6px;}
  .cta-panel h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.4vw,40px);color:var(--encre);margin:0;}
  .cta-sub{color:var(--gris);font-size:17px;max-width:48ch;margin:14px auto 26px;}
  .cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
  .cta-final .btn{background:var(--rouge);border-color:var(--rouge);}
  .cta-final .btn:hover{background:var(--encre);color:#fff;border-color:var(--encre);}
  .cta-final .btn.ghost{background:transparent;color:var(--rouge);}
  .cta-final .btn.ghost:hover{background:var(--rose-pale);color:var(--rouge);border-color:var(--rouge);}
  .cta-addr{margin:24px 0 0;font-size:14px;color:var(--gris);display:flex;gap:7px;align-items:center;justify-content:center;}
  .cta-addr svg{width:16px;height:16px;color:var(--rouge);flex:0 0 auto;}

  /* Footer */
  footer{background:#fff;border-top:1px solid var(--ligne);padding:40px 0;font-size:14px;color:var(--gris);}
  .foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;}
  footer .legal{margin-top:24px;border-top:1px solid var(--ligne);padding-top:18px;font-size:12px;}

  /* Les grilles passent en une colonne sous 861 px — inchangé. Ce seuil est
     celui du CONTENU, distinct de celui du menu (1000 px) : les deux n'ont
     pas de raison d'être liés. */
  @media(max-width:860px){
    .hero-grid,.g3,.g4,.sec-head{grid-template-columns:1fr;}
  }

  @media(max-width:1000px){

    /* ===== Menu mobile (06/09/2026) =====
       Avant cette date, « nav.menu{display:none} » suffisait : le menu
       disparaissait sur téléphone et RIEN ne le remplaçait. Il ne restait que
       le bouton de devis et les liens du pied de page — sur la moitié du
       trafic. Le menu devient ici un panneau déroulant.

       Le panneau réutilise le <nav> existant plutôt qu'un second menu caché :
       un seul jeu de liens à maintenir, et pas de doublon dans le document. */
    .burger{display:flex;}

    /* Mesuré à 388 px : le logo (190) et le bouton de devis (130) occupaient
       déjà toute la largeur, au pixel près. Aucune place pour un troisième
       élément : le bouton de l'en-tête cède la place au hamburger, et le devis
       réapparaît en tête du panneau. */
    .header-cta{display:none;}
    .nav .logo-img{height:56px;}
    .nav{gap:12px;}

    nav.menu{
      display:none;
      position:absolute;left:0;right:0;top:100%;
      flex-direction:column;gap:0;
      background:#fff;border-bottom:1px solid var(--ligne);
      box-shadow:0 14px 28px rgba(0,0,0,.10);
      padding:4px 28px 22px;
      /* Le panneau doit défiler seul si l'écran est très bas (paysage). */
      max-height:78vh;overflow-y:auto;
      font-size:17px;
    }
    header.menu-ouvert nav.menu{display:flex;}
    nav.menu a{padding:15px 0;border-bottom:1px solid var(--ligne);}
    nav.menu a:hover{border-bottom-color:var(--ligne);}

    /* Le hamburger devient une croix à l'ouverture : trois barres de 2 px
       espacées de 5 px, donc 7 px du centre pour les deux extrêmes. */
    header.menu-ouvert .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    header.menu-ouvert .burger span:nth-child(2){opacity:0;}
    header.menu-ouvert .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

    .menu-devis{
      display:block;margin-top:18px;text-align:center;
      background:var(--rouge);color:#fff;border:1.5px solid var(--rouge);
      border-radius:999px;padding:14px 22px;font-weight:600;
    }
    /* Sans cette remise à zéro, la bordure de séparation des autres entrées
       viendrait barrer le bas du bouton. */
    nav.menu a.menu-devis{border-bottom:none;}
  }


/* ===== Pages de contenu (générées) ===== */
.page-hero{padding:54px 0 6px;}
.page-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.2vw,52px);max-width:20ch;}
.page-hero .lead{font-size:19px;color:var(--gris);border-left:3px solid var(--rouge);padding-left:20px;max-width:60ch;margin-top:20px;}
.prose{max-width:780px;}
.prose h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.6vw,30px);margin:38px 0 12px;}
.prose h3{font-family:var(--display);font-weight:600;font-size:21px;margin:26px 0 8px;}
.prose p{margin:0 0 16px;color:#4A4B51;}
.prose ul,.prose ol{margin:0 0 18px 22px;}
.prose li{margin:7px 0;color:#4A4B51;}
.prose blockquote{border-left:3px solid var(--ligne);padding:4px 0 4px 18px;margin:0 0 18px;color:var(--gris);font-style:italic;}
.prose a{color:var(--rouge);border-bottom:1px solid var(--rouge);}
.prose strong{color:var(--encre);}
.prose hr{border:none;border-top:1px solid var(--ligne);margin:28px 0;}
.byline{margin-top:24px;color:var(--gris);font-style:italic;font-size:14px;}
.conf{background:#FFE3E7;color:#A32230;padding:1px 6px;border-radius:3px;font-size:.9em;}
/* formulaire contact */
.cform{max-width:980px;display:grid;gap:18px;margin-top:8px;}
.fcard{display:grid;gap:16px;background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:24px;align-content:start;}
.fcard .fstep{border-top:none;padding-top:0;margin:0;}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
@media(max-width:760px){.fcols{grid-template-columns:1fr;}}
.cform label{font-size:14px;font-weight:600;color:var(--encre);display:block;margin-bottom:6px;}
.cform .req{color:var(--rouge);font-weight:700;}
.cform .reqlegend{font-size:13px;color:var(--gris);margin:0;}
.cform input,.cform select,.cform textarea{width:100%;font-family:var(--corps);font-size:15px;padding:12px 14px;border:1px solid var(--ligne);border-radius:10px;background:#fff;color:var(--encre);}
.cform textarea{min-height:120px;resize:vertical;}
.cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:640px){.cform .row2{grid-template-columns:1fr;}}

/* formulaire — détails brief & cases */
.cform details{border:1px solid var(--ligne);border-radius:12px;padding:0 16px;background:#fff;}
.cform details>summary{cursor:pointer;list-style:none;font-weight:600;padding:14px 0;color:var(--encre);display:flex;justify-content:space-between;align-items:center;}
.cform details>summary::-webkit-details-marker{display:none;}
.cform details>summary .pm{color:var(--rouge);font-size:22px;line-height:1;transition:.15s;}
.cform details[open]>summary .pm{transform:rotate(45deg);}
.cform details .inner{display:grid;gap:16px;padding:4px 0 18px;}
.cform .checks{display:flex;flex-wrap:wrap;gap:10px;}
.cform .checks label{font-weight:400;display:inline-flex;gap:7px;align-items:center;border:1px solid var(--ligne);padding:8px 14px;border-radius:999px;font-size:13px;margin:0;cursor:pointer;}
.cform .checks input{width:auto;}
.cform fieldset{border:none;padding:0;margin:0;}
/* ─── Formulaire de devis : consentement, champ leurre, message de repli ─── */
/* Champ leurre anti-robot : sorti du flux visuel sans display:none, que certains
   robots détectent. Invisible à l'écran, hors tabulation, masqué aux lecteurs
   d'écran par aria-hidden côté HTML. */
.cform .leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cform .fconsent{gap:12px;}
.cform label.consent{display:flex;gap:12px;align-items:flex-start;font-weight:400;line-height:1.55;margin:0;cursor:pointer;}
.cform label.consent input{width:auto;flex:0 0 auto;margin-top:3px;}
/* Case facultative (lettre d'information) : détachée de la case obligatoire
   par un filet, pour qu'on voie d'un coup d'œil qu'il s'agit d'un choix
   distinct — et non d'une condition de plus. */
.cform label.consent.optin{border-top:1px solid var(--ligne);padding-top:16px;margin-top:2px;color:var(--gris);}
.cform label.consent.optin strong{color:var(--encre);}
.cform .fwarn{background:#fff;border:1px solid var(--rouge);border-left:4px solid var(--rouge);border-radius:12px;padding:20px 24px;display:grid;gap:10px;}
.cform .fwarn p{margin:0;line-height:1.6;}
.cform .fwarn ul{margin:0;padding-left:20px;line-height:1.9;}
.cform .fwarn:focus{outline:2px solid var(--rouge);outline-offset:3px;}

/* ─── Tableaux (pages légales : durées de conservation, prestataires) ─────
   Premier usage de tableaux sur le site. Sur mobile, le tableau devient un
   bloc défilable horizontalement : mieux qu'un texte écrasé sur trois
   colonnes, et la page elle-même ne défile jamais de côté. */
.prose .tbl{width:100%;border-collapse:collapse;margin:18px 0 8px;font-size:15px;}
.prose .tbl th,.prose .tbl td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--ligne);vertical-align:top;line-height:1.55;}
.prose .tbl thead th{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--gris);font-weight:700;border-bottom:2px solid var(--ligne);}
.prose .tbl tbody tr:last-child td{border-bottom:none;}
@media(max-width:640px){
  .prose .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .prose .tbl th,.prose .tbl td{padding:10px 12px;}
}
.cform fieldset>span.flab{display:block;font-size:14px;font-weight:600;margin-bottom:8px;}
.cform .fstep{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:19px;color:var(--encre);margin:30px 0 6px;padding-top:24px;border-top:1px solid var(--ligne);}
.cform .fstep:first-child{border-top:none;padding-top:0;margin-top:0;}
.cform .fnum{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--rouge);color:#fff;font-family:var(--corps);font-size:13px;font-weight:700;}

/* ---- Qui sommes-nous : hero maquette + équipe ---- */
.breadcrumb{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:18px;}
.breadcrumb a{color:var(--gris);}
.breadcrumb a:hover{color:var(--rouge);}
.qsn-hero{padding:46px 0 8px;}
.qsn-hero .cols{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;}
.qsn-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,5vw,58px);line-height:1.04;max-width:14ch;margin:0;}
.qsn-hero .lead{font-size:19px;color:var(--gris);border-left:3px solid var(--rouge);padding-left:20px;max-width:46ch;margin:24px 0 0;}
.qsn-portrait img{width:100%;height:auto;border-radius:18px;display:block;filter:grayscale(1);}
@media(max-width:820px){.qsn-hero .cols{grid-template-columns:1fr;gap:30px;}.qsn-portrait{order:-1;}}

/* ---- Secteurs : grille de cartes cliquables ---- */
.sectors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;margin:6px 0 8px;}
.sector-card{display:flex;flex-direction:column;gap:11px;border:1px solid var(--ligne);border-radius:16px;padding:22px;background:#fff;text-decoration:none;color:inherit;transition:.15s ease;scroll-margin-top:90px;}
.sector-card:hover{border-color:var(--rouge);box-shadow:0 8px 24px rgba(0,0,0,.06);transform:translateY(-2px);}
.sector-card h3{font-family:var(--display);font-weight:600;font-size:19px;margin:0;color:var(--encre);}
.sector-card p{margin:0;color:#4A4B51;font-size:14.5px;line-height:1.55;flex:1;}
.sector-card .go{font-size:13px;font-weight:600;color:var(--rouge);}
.sector-card.autre{background:var(--rose-pale);border-style:dashed;}
.card-actions{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:auto;padding-top:6px;}
.card-actions a{font-size:13px;font-weight:600;text-decoration:none;}
.card-actions a.sel{color:var(--rouge);}
.card-actions a.sel:hover{text-decoration:underline;}
.card-actions a.dev{color:var(--gris);}
.card-actions a.dev:hover{color:var(--encre);text-decoration:underline;}

/* ---- Services : blocs avec icône ---- */
.svc{display:flex;gap:20px;align-items:flex-start;padding:26px 0;border-top:1px solid var(--ligne);scroll-margin-top:90px;}
.svc:first-of-type{border-top:none;padding-top:6px;}
.svc-ic{flex:0 0 auto;width:52px;height:52px;border-radius:14px;background:var(--rose-pale);color:var(--rouge);display:flex;align-items:center;justify-content:center;}
.svc-ic svg{width:26px;height:26px;}
.svc-body{flex:1;min-width:0;}
.svc-body h2{margin:0 0 8px!important;}
.svc-body p{margin:0;}
@media(max-width:560px){.svc{gap:14px;}.svc-ic{width:44px;height:44px;border-radius:12px;}.svc-ic svg{width:22px;height:22px;}}

.team-title{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.6vw,30px);margin:0 0 12px;}
.team-intro{color:var(--gris);font-size:17px;max-width:620px;margin:0 0 34px;}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:28px 22px;margin:6px 0 4px;}
.team-card{text-align:center;}
.team-card .avatar{width:128px;height:128px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 14px;background:var(--rose-pale);}
.team-card .name{font-family:var(--display);font-weight:600;font-size:18px;display:block;}
.team-card .role{font-size:13.5px;color:var(--gris);display:block;margin-top:2px;}

/* ===================== FUSION v2 (chaleur + griffe) ===================== */
/* ============================================================
   accespub-v2.css — variante « chaleur + motif griffe »
   Prototype : importe la charte existante puis la réchauffe.
   Aucune nouvelle teinte (on reste rouge signature + rosé + neutres),
   on ajoute un crème chaud, des fonds teintés et le motif « griffe ».
   ============================================================ */

:root{
  --creme:#FBF4EE;      /* neutre chaud (sable) */
  --peche:#FFF3EC;      /* tint chaud dérivé du rouge */
  --rose2:#FDEEF0;
}

/* ---- Hero réchauffé + motif décoratif ---- */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FFF1F2 0%, #FFF8F4 55%, #ffffff 100%);}
.hero .hero-grid{position:relative;z-index:2;}
.hero .griffe{position:absolute;z-index:1;pointer-events:none;opacity:.5;}
.hero .griffe.g-top{top:-30px;left:-40px;width:420px;transform:rotate(-4deg);}
.hero .griffe.g-bottom{bottom:-50px;right:-30px;width:360px;transform:rotate(8deg);}
.griffe path{fill:none;stroke-linecap:round;}

/* petit trait « griffe » sous les sur-titres */
.eyebrow.with-griffe{display:inline-block;position:relative;padding-bottom:10px;}
.eyebrow.with-griffe::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:6px;
  border-radius:4px;background:var(--rouge);opacity:.85;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='6'%3E%3Cpath d='M1 3 C 16 0, 22 6, 34 3 S 56 0, 63 4' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='6'%3E%3Cpath d='M1 3 C 16 0, 22 6, 34 3 S 56 0, 63 4' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;}

/* ---- Bandes alternées : un peu de chaleur ---- */
.band.creme{background:var(--creme);}

/* ---- « L'impact maîtrisé » : pastilles numérotées rouges ---- */
.g3 .ncard{background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:26px 22px;transition:.15s ease;}
.g3 .ncard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(255,73,92,.10);border-color:rgba(255,73,92,.35);}
.g3 .ncard .num{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:var(--rouge);color:#fff;
  font-family:var(--corps);font-weight:800;font-size:16px;margin-bottom:14px;}

/* ---- « Ce que nous faisons » : cartes à fonds teintés + chaleur ---- */
.prod-grid .prod .ph{border-bottom:none;}
.prod-grid .prod:nth-child(1) .ph{background:var(--rose-pale);}
.prod-grid .prod:nth-child(2) .ph{background:var(--peche);}
.prod-grid .prod:nth-child(3) .ph{background:var(--rose2);}
.prod-grid .prod:nth-child(4) .ph{background:var(--creme);}
.prod-grid .prod:nth-child(5) .ph{background:#FFF1F2;}
.prod-grid .prod{transition:.15s ease;}
.prod-grid .prod:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(255,73,92,.12);border-color:rgba(255,73,92,.35);}
/* emplacement prêt pour une vraie photo (remplace l'icône le jour venu) */
.prod .ph img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---- « Vous êtes… » : tuiles plus vivantes ---- */
.seg{transition:.15s ease;}
.seg:hover{background:var(--rose-pale);border-color:rgba(255,73,92,.4);transform:translateY(-2px);}
.seg .seg-go{color:var(--rouge);}

/* icône dans les tuiles « Vous êtes… » */
.seg .seg-ic{display:block;width:34px;height:34px;color:var(--rouge);margin:0 auto 12px;}
.seg .seg-ic svg{width:100%;height:100%;}

/* ---- Emplacements photo réservés (avant les vraies photos) ---- */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.photo-slot{position:relative;border:2px dashed rgba(255,73,92,.4);border-radius:18px;
  background:var(--rose-pale);min-height:220px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;color:var(--gris);}
.photo-slot svg{width:44px;height:44px;color:var(--rouge);opacity:.75;}
.photo-slot .ps-t{font-weight:600;color:var(--encre);}
.photo-slot small{font-size:13px;}
.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:16px;} /* prêt : glisser une <img> ici */

/* ---- Séparateur « griffe » entre sections (optionnel) ---- */
.griffe-sep{display:block;width:120px;height:12px;margin:0 auto;color:var(--rouge);opacity:.7;}

/* ===================== FUSION v3 (peps + frise) ===================== */
/* ============================================================
   accespub-v3.css — variante « expressive / peps »
   Importe la v2 (chaleur + griffe) et pousse le curseur :
   hero XXL, frise d'objets animée, titres surdimensionnés.
   Toujours rouge signature + rosé, aucune photo requise.
   ============================================================ */

/* ---- HERO plus affirmé ---- */
.hero{background:radial-gradient(130% 150% at 0% 0%, #FFD3D9 0%, #FFE7EA 40%, #FFF6F2 100%);}
.hero h1{font-size:clamp(42px,7.2vw,86px);line-height:.99;letter-spacing:-1.5px;}
.hero h1 em{color:var(--rouge);}                 /* « de vos objets média » en rouge */
.hero .lead{font-size:20px;max-width:36em;}
.hero .griffe.g-top{width:540px;opacity:.6;top:-40px;}
.hero .griffe.g-bottom{width:460px;opacity:.55;}
.hero .chip{background:#fff;border-color:rgba(255,73,92,.35);}

/* ---- Titres de section XXL ---- */
.sec{font-size:clamp(30px,4.6vw,52px);line-height:1.02;}
.sec-head .eyebrow{font-size:13px;letter-spacing:.22em;}

/* ---- Frise d'objets média (line-art animé) ---- */
.objband{background:var(--rouge);overflow:hidden;}
.objband .marq{display:flex;gap:54px;align-items:center;width:max-content;
  padding:22px 0;animation:acp-marq 28s linear infinite;}
.objband .marq svg{width:44px;height:44px;color:#fff;flex:0 0 auto;}
.objband .marq .w{color:#fff;font-family:var(--display);font-style:italic;
  font-size:26px;flex:0 0 auto;white-space:nowrap;opacity:.95;}
.objband .marq .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);flex:0 0 auto;}
@keyframes acp-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.objband .marq{animation:none;}}

/* ---- Boutons plus ronds/punchy ---- */
.btn{border-radius:999px;}

/* ===================== FUSION v4 (moins de rose, rouge net) ===================== */
/* ============================================================
   accespub-v4.css — « moins de rose, plus de rouge net »
   On neutralise les aplats rosés (remplacés par blanc + crème
   chaud très clair) et on laisse le ROUGE faire l'énergie.
   ============================================================ */

/* Neutraliser les roses pâles -> crème/greige quasi blanc */
:root{
  --rose-pale:#F5F1EA;   /* ex rosé -> crème très clair */
  --wash:#F5F1EA;
  --creme:#F5F1EA;
  --peche:#F1ECE4;
  --rose2:#F7F4EF;
}

/* Hero : fond clair neutre, le rouge (titre + griffe) fait le peps */
.hero{background:linear-gradient(180deg,#FAF7F2 0%, #ffffff 68%);}
.hero .griffe{opacity:.9;}                 /* griffe en rouge franc (plus « rose ») */
.hero .chip{background:#fff;border-color:rgba(255,73,92,.4);}

/* Bandes : crème très clair au lieu de rosé */
.band.alt, .band.creme{background:#F7F4EF;}
.cta-final{background:#F7F4EF;}

/* Cartes produits : entêtes crème neutre (plus de dégradé rose) */
.prod-grid .prod .ph{background:#F4F0E9 !important;}

/* Emplacements photo : cadre rouge sur fond crème (au lieu de rosé) */
.photo-slot{background:#F7F4EF;border-color:rgba(255,73,92,.45);}

/* Encart contact : léger, bord rouge net */
.cta-panel{background:#fff;}

/* Tuiles « Vous êtes… » au survol : voile crème, pas rose */
.seg:hover{background:#F7F4EF;border-color:rgba(255,73,92,.45);}

/* La frise objets reste ROUGE plein = le vrai accent coloré */

/* ===== « Vous êtes… » : la case s'allume pour qu'on se reconnaisse ===== */
.seg{transition:.18s ease;position:relative;}
.seg .seg-ic, .seg .seg-t, .seg .seg-d, .seg .seg-go{transition:.18s ease;}
.seg:hover, .seg:focus-visible, .seg.sel-on{
  background:var(--rouge)!important;border-color:var(--rouge)!important;
  box-shadow:0 16px 36px rgba(255,73,92,.30);transform:translateY(-4px);}
.seg:hover .seg-t, .seg:focus-visible .seg-t, .seg.sel-on .seg-t,
.seg:hover .seg-d, .seg:focus-visible .seg-d, .seg.sel-on .seg-d,
.seg:hover .seg-go, .seg:focus-visible .seg-go, .seg.sel-on .seg-go{color:#fff!important;}
.seg:hover .seg-ic, .seg:focus-visible .seg-ic, .seg.sel-on .seg-ic{color:#fff!important;transform:scale(1.14);}
/* la flèche devient « C'est moi → » quand la case est active */
.seg:hover .seg-go, .seg:focus-visible .seg-go, .seg.sel-on .seg-go{font-family:var(--corps);font-weight:700;}
.seg:hover .seg-go::before, .seg:focus-visible .seg-go::before, .seg.sel-on .seg-go::before{content:"C'est moi  ";}
/* la case « Autre » (pointillés) réagit aussi */
.seg.autre:hover, .seg.autre:focus-visible{border-style:solid;}

/* ===================== « Vous êtes… » : mémoriser le profil ===================== */
.seg.remembered{border-color:var(--rouge)!important;box-shadow:0 0 0 2px rgba(255,73,92,.55) inset;}
.seg.remembered::after{content:"Vous";position:absolute;top:10px;right:12px;background:var(--rouge);
  color:#fff;font-family:var(--corps);font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:2px 9px;border-radius:999px;}