@charset "UTF-8";
/* ==========================================================================
   Diferance Print - direction visuelle "Petales"
   Feuille de style unique, chargee sur les 13 pages du site.
   Ordre des sections :
   1. Tokens          2. Reset            3. Typographie
   4. Mise en page    5. En-tete et nav   6. Pied de page
   7. Composants      8. Bandeaux de page 9. Responsive
   10. Filet de securite sans JavaScript
   ========================================================================== */


/* ==========================================================================
   1. TOKENS (custom properties)
   ========================================================================== */
:root{
  /* fonds et textes */
  --blanc:#FFFFFF;
  --pale:#F0F4FF;
  --noir:#101010;
  --texte:#5A5F6B;
  --bord:#EDEFF5;

  /* couleurs vives */
  --rouge:#F0453A;
  --bleu:#2B5CE6;
  --jaune:#FFB000;
  --vert:#34A853;

  /* couleurs de texte accentue (contraste AA sur fond clair) */
  --rouge-txt:#C81E14;
  --vert-txt:#1E7E34;

  /* fonds pales colores */
  --bleu-pale:#E4EAFD;
  --jaune-pale:#FFF1D6;
  --rose-pale:#FDE4E2;
  --vert-pale:#E1F3E6;

  /* ombres */
  --ombre:0 6px 24px rgba(16,16,16,.05);
  --ombre-h:0 16px 40px rgba(16,16,16,.12);

  /* rayons */
  --r-carte:16px;
  --r-btn:8px;

  /* typographie et rythme */
  --font:"Poppins","Helvetica Neue",Arial,sans-serif;
  --marge:clamp(18px,5vw,64px);
  --bloc:clamp(56px,7vw,104px);
}


/* ==========================================================================
   2. RESET
   ========================================================================== */
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--noir);font-family:var(--font);
  font-size:16px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0}
:focus-visible{outline:2px solid var(--bleu);outline-offset:2px;border-radius:4px}


/* ==========================================================================
   3. TYPOGRAPHIE
   ========================================================================== */
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.22;letter-spacing:-.01em}
h1{font-size:clamp(2rem,3.8vw,3.1rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
h3{font-size:1.05rem}
h4{font-size:.95rem}
p{margin:0;color:var(--texte)}
p + p{margin-top:16px}
strong,b{font-weight:600}
.intro{font-size:1.05rem;max-width:52ch}
.mesure{max-width:62ch}
.centre{text-align:center;margin-inline:auto}
.lien-texte{color:var(--bleu);text-decoration:underline;text-underline-offset:3px}
.lien-texte:hover{color:var(--noir)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ==========================================================================
   4. UTILITAIRES DE MISE EN PAGE
   ========================================================================== */
.wrap{width:min(1200px,100% - var(--marge)*2);margin-inline:auto}
.sec{padding:var(--bloc) 0}
.sec--pale{background:var(--pale)}
.sec--serre{padding:clamp(40px,5vw,64px) 0}
.tete{max-width:62ch;margin-bottom:clamp(28px,4vw,48px)}
.tete p{margin-top:14px}
.tete--centre{text-align:center;margin-inline:auto}
.grille-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grille-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.deux{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
.pile{display:grid;gap:16px}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}


/* ==========================================================================
   5. EN-TETE ET NAVIGATION
   ========================================================================== */

/* barre utilitaire noire */
.util{background:var(--noir);color:#fff;font-size:12px}
.util .wrap{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.util a{color:#E6E7EA}
.util a:hover{color:#fff}
.util-g{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.util-d{display:flex;gap:14px;align-items:center}
.util-d a{display:grid;place-items:center;width:26px;height:26px;border-radius:999px}
.util-d a:hover{background:#242424}

/* barre de navigation blanche */
.nav{background:#fff;border-bottom:1px solid var(--bord);position:sticky;top:0;z-index:40}
.nav .wrap{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}

/* logo, marque en deux petales */
.logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;letter-spacing:.08em}
.marque{position:relative;width:26px;height:26px;flex:none;display:block}
.marque span{position:absolute}

/* conteneur des liens et du bouton */
.menu{display:flex;align-items:center;gap:30px}
.liens{display:flex;align-items:center;gap:30px;list-style:none;font-size:14px;font-weight:500}
.liens > li{position:relative}
.lien{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 0;
  color:#2A2D34;background:none;border:0;cursor:pointer;font:inherit;font-weight:500;font-size:14px}
.lien::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--bleu);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.lien:hover::after{transform:scaleX(1)}
.lien.est-actif{color:var(--noir)}
.lien.est-actif::after{transform:scaleX(1)}
.lien-fleche{transition:transform .25s ease;flex:none}

/* sous-menu Prestations */
.sous{position:absolute;left:-14px;top:calc(100% + 12px);min-width:264px;list-style:none;
  background:#fff;border:1px solid var(--bord);border-radius:var(--r-carte);box-shadow:var(--ombre-h);
  padding:10px;display:grid;gap:2px;z-index:50;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.sous a{display:block;padding:9px 14px;border-radius:8px;font-size:14px;color:#2A2D34}
.sous a:hover{background:var(--pale);color:var(--noir)}
.sous a.est-actif{background:var(--pale);color:var(--noir);font-weight:500}
.a-sous.ouvert > .sous{opacity:1;visibility:visible;transform:none}
.a-sous.ouvert > .lien .lien-fleche{transform:rotate(180deg)}

/* bouton hamburger, visible sous 1100px seulement */
.burger{display:none;width:44px;height:44px;border:1px solid var(--bord);border-radius:var(--r-btn);
  background:#fff;cursor:pointer;padding:0;place-items:center;gap:5px}
.burger-trait{display:block;width:18px;height:2px;background:var(--noir);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] .burger-trait:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-trait:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-trait:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


/* ==========================================================================
   6. PIED DE PAGE
   ========================================================================== */
.pied{background:var(--noir);color:#C9CBD2;padding:clamp(56px,7vw,88px) 0 0}
.pied a{color:#C9CBD2}
.pied a:hover{color:#fff}
.pied-haut{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px}
.pied .logo{color:#fff;margin-bottom:16px}
.pied-haut p{font-size:14px;color:#9EA2AC;max-width:34ch}
.pied h3{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px}
.pied ul{list-style:none;display:grid;gap:10px;font-size:14px}
.pied li{color:#9EA2AC}
.res{display:flex;gap:10px;margin-top:22px}
.res a{width:34px;height:34px;border-radius:999px;border:1px solid #2A2A2A;display:grid;place-items:center}
.res a:hover{background:#1D1D1D}
.copy{border-top:1px solid #1F1F1F;padding:22px 0;font-size:13px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;color:#8A8E98}
.copy a{color:#8A8E98;text-decoration:underline;text-underline-offset:3px}
.copy a:hover{color:#fff}


/* ==========================================================================
   7. COMPOSANTS
   ========================================================================== */

/* --- 7.1 Pastilles de section --------------------------------------------- */
.pastille{display:inline-block;padding:6px 16px;border-radius:999px;font-size:12px;
  font-weight:500;line-height:1.6;margin-bottom:14px}
.p-bleu{background:var(--bleu);color:#fff}
.p-rouge{background:var(--rouge-txt);color:#fff}
.p-jaune{background:var(--jaune);color:var(--noir)}
.p-vert{background:var(--vert);color:var(--noir)}

/* --- 7.2 Boutons ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:var(--r-btn);
  background:var(--noir);color:#fff;font-size:12px;font-weight:500;text-transform:uppercase;
  letter-spacing:.06em;border:1px solid var(--noir);cursor:pointer;text-align:center;
  transition:transform .25s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:var(--ombre-h)}
.btn--clair{background:#fff;color:var(--noir)}
/* CTA secondaire : moins contraste que le bouton noir, pour la hierarchie
   audit gratuit (primaire) / demander un devis (secondaire) */
.btn--sec{background:transparent;color:var(--noir);box-shadow:inset 0 0 0 1.5px var(--noir)}
.btn--sec:hover,.btn--sec:focus-visible{background:var(--noir);color:#fff;
  box-shadow:inset 0 0 0 1.5px var(--noir),var(--ombre-h)}
/* paire de CTA : le primaire d'abord, le secondaire ensuite */
.btn--clair-sec{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.btn--clair-sec:hover,.btn--clair-sec:focus-visible{background:#fff;color:var(--noir);
  box-shadow:inset 0 0 0 1.5px #fff,var(--ombre-h)}
.cta-paire{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-final .cta-paire{justify-content:flex-end}
@media (max-width:768px){
  .cta-final .cta-paire{justify-content:flex-start}
  .cta-paire{width:100%}
  .cta-paire .btn{flex:1 1 auto;justify-content:center}
}
.btn--nav{padding:12px 20px}

/* --- 7.3 Petales geometriques --------------------------------------------- */
.petale{position:absolute;display:block;z-index:0}
.pt-demi{border-radius:999px 999px 0 0}
.pt-quart{border-radius:100% 0 0 0}
.pt-quart-bd{border-radius:0 100% 0 0}
.pt-rond{border-radius:999px}

/* --- 7.4 Disques d'icone -------------------------------------------------- */
.disque{width:52px;height:52px;border-radius:999px;display:grid;place-items:center;flex:none}
.d-bleu{background:var(--bleu-pale);color:#1B3FA8}
.d-jaune{background:var(--jaune-pale);color:#8A5B00}
.d-rose{background:var(--rose-pale);color:#A3241C}
.d-vert{background:var(--vert-pale);color:#1E6B33}

/* --- 7.5 Cartes ----------------------------------------------------------- */
.carte{background:#fff;border:1px solid var(--bord);border-radius:var(--r-carte);box-shadow:var(--ombre);
  padding:28px;transition:transform .3s ease,box-shadow .3s ease}
.carte:hover{transform:translateY(-4px);box-shadow:var(--ombre-h)}
.carte h3{margin:20px 0 10px}
.carte p{font-size:14px}
.savoir{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;color:var(--bleu)}
.savoir svg{transition:transform .25s ease}
.carte:hover .savoir svg{transform:translateX(4px)}

/* --- 7.6 Tuiles colorees (realisations, familles de supports) ------------- */
.tuile{border-radius:var(--r-carte);padding:20px;border:1px solid var(--bord);position:relative}
.tuile img{border-radius:12px 60px 12px 12px;margin-bottom:18px;width:100%;object-fit:cover}
.tuile h3{font-size:.98rem}
.tuile-type{display:block;margin-top:6px;font-size:13px;color:var(--texte)}
.t-bleu{background:var(--bleu-pale)}
.t-jaune{background:var(--jaune-pale)}
.t-rose{background:var(--rose-pale)}
.t-vert{background:var(--vert-pale)}

/* --- 7.7 Hero d'accueil --------------------------------------------------- */
.hero{padding:clamp(40px,6vw,80px) 0 var(--bloc);min-height:88vh;display:flex;align-items:center}
@supports (height:100dvh){.hero{min-height:min(88dvh,940px)}}
.hero-grille{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero p.intro{margin:20px 0 28px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.confiance{display:flex;align-items:flex-start;gap:10px;margin-top:32px;padding-top:22px;
  border-top:1px solid var(--bord);font-size:13px;color:var(--texte);max-width:46ch}
.hero-media{position:relative}
.hero-media img{position:relative;z-index:1;border-radius:24px 160px 24px 24px;width:100%;object-fit:cover}
.encart{position:absolute;z-index:2;left:-14px;bottom:34px;background:#fff;border:1px solid var(--bord);
  border-radius:var(--r-carte);box-shadow:var(--ombre);padding:16px 20px;display:flex;gap:14px;align-items:center;max-width:270px}
.encart b{display:block;font-size:15px;font-weight:600}
.encart small{color:var(--texte);font-size:12px}

/* --- 7.8 Blocs media en deux colonnes ------------------------------------- */
.media-apropos{position:relative}
.media-apropos img{position:relative;z-index:1;border-radius:160px 24px 24px 24px;width:100%}
.media-faq{position:relative}
.media-faq img{position:relative;z-index:1;border-radius:24px 24px 160px 24px;width:100%}
.args{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;margin-top:32px}
.arg h3{font-size:.95rem;margin-bottom:6px}
.arg p{font-size:14px}
.arg .disque{width:42px;height:42px;margin-bottom:14px}

/* bloc texte plus image, reutilisable sur toutes les pages internes */
.deux-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.deux-cols-media{position:relative}
.deux-cols-media img{position:relative;z-index:1;width:100%;border-radius:24px 120px 24px 24px;object-fit:cover}
.deux-cols--inverse .deux-cols-media{order:2}
.deux-cols--inverse .deux-cols-texte{order:1}
.deux-cols--inverse .deux-cols-media img{border-radius:120px 24px 24px 24px}
.deux-cols-texte h2{margin-bottom:16px}

/* --- 7.9 Accordeon -------------------------------------------------------- */
.acc{display:grid;gap:12px}
.acc-item{border-radius:12px;background:#F5F6F9;overflow:hidden;transition:background .25s ease}
.acc-item.ouvert{background:var(--noir)}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 22px;background:none;border:0;font:inherit;font-weight:500;font-size:15px;
  color:var(--noir);text-align:left;cursor:pointer}
.acc-item.ouvert .acc-btn{color:#fff}
.acc-signe{flex:none;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;
  background:#fff;color:var(--noir);font-size:16px;line-height:1;transition:transform .3s ease}
.acc-item.ouvert .acc-signe{transform:rotate(45deg)}
.acc-corps{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.acc-item.ouvert .acc-corps{grid-template-rows:1fr}
.acc-corps>div{overflow:hidden}
.acc-corps p{padding:0 22px 20px;font-size:14px;color:#C9CBD2;max-width:58ch}

/* --- 7.10 Chiffres cles --------------------------------------------------- */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;
  background:var(--pale);border-radius:var(--r-carte);padding:clamp(32px,5vw,56px)}
.chiffre b{font-size:clamp(2.2rem,4vw,3rem);font-weight:600;line-height:1.1;display:block}
.chiffre b i{font-style:normal;font-size:.6em;font-weight:600;margin-left:2px}
.chiffre small{display:block;margin-top:8px;color:var(--texte);font-size:13px;max-width:22ch;margin-inline:auto}
.sig-r{color:var(--rouge-txt)}
.sig-v{color:var(--vert-txt)}
.sig-b{color:var(--bleu)}

/* --- 7.11 Bandeau citation ------------------------------------------------ */
.citation{position:relative;isolation:isolate;color:#fff;text-align:center;padding:clamp(64px,9vw,120px) 0}
.citation img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.citation::after{content:"";position:absolute;inset:0;background:rgba(12,12,14,.72);z-index:-1}
.citation blockquote{margin:0 auto 28px;font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:600;
  line-height:1.35;max-width:20ch}
.citation .btn{background:#fff;color:var(--noir);border-color:#fff}

/* --- 7.12 Notice d'information ------------------------------------------- */
/* L'attribut hidden doit toujours l'emporter.
   Le navigateur applique display:none aux elements qui le portent, mais
   cette regle vient de sa feuille par defaut : la moindre declaration de
   display dans notre feuille la neutralise. C'est exactement ce qui s'est
   produit sur la page de confirmation, ou .notice{display:flex} rendait le
   bloc d'erreur visible en permanence, y compris apres un envoi reussi.
   Une regle globale evite que le probleme se reproduise ailleurs. */
[hidden]{display:none !important}

.notice{background:var(--pale);border-radius:var(--r-carte);padding:20px 24px;font-size:14px;
  color:var(--texte);display:flex;gap:14px;align-items:flex-start}
.notice strong{color:var(--noir);display:block;margin-bottom:4px;font-size:15px}
.notice svg{flex:none;margin-top:2px}

/* --- 7.13 Rangee d'ancres ------------------------------------------------- */
.ancres{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 clamp(28px,4vw,44px)}
.ancres a{display:inline-block;padding:9px 18px;border-radius:999px;border:1px solid var(--bord);
  background:#fff;font-size:13px;font-weight:500;color:#2A2D34;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.ancres a:hover{background:var(--noir);border-color:var(--noir);color:#fff}
.sec--pale .ancres a{background:#fff}

/* --- 7.14 Formulaires ----------------------------------------------------- */
.formulaire{display:grid;gap:20px}
.formulaire .grille-2{gap:20px}
.champ{display:grid;gap:8px}
.champ label{font-size:13px;font-weight:500;color:var(--noir)}
.champ .aide{font-size:12px;color:var(--texte)}
.champ input,.champ select,.champ textarea{
  width:100%;padding:13px 16px;border:1px solid var(--bord);border-radius:var(--r-btn);
  background:#fff;font:inherit;font-size:15px;color:var(--noir);
  transition:border-color .2s ease,box-shadow .2s ease}
.champ textarea{min-height:150px;resize:vertical}
.champ input::placeholder,.champ textarea::placeholder{color:#8A8E98}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{
  outline:2px solid var(--bleu);outline-offset:2px;border-color:var(--bleu)}
.champ--requis label::after{content:" *";color:var(--rouge-txt)}
.champ-case{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--texte)}
.champ-case input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--bleu)}

/* --- 7.15 Tableaux -------------------------------------------------------- */
.tableau-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-carte)}
.tableau{width:100%;border-collapse:collapse;font-size:14px;background:#fff;
  border:1px solid var(--bord);border-radius:var(--r-carte);overflow:hidden}
.tableau caption{caption-side:top;text-align:left;font-size:13px;color:var(--texte);padding:0 2px 12px}
.tableau th,.tableau td{padding:14px 18px;text-align:left;vertical-align:top;border:0}
.tableau thead th{background:var(--pale);color:var(--noir);font-weight:600;font-size:13px;
  letter-spacing:.02em;border-bottom:1px solid var(--bord)}
.tableau tbody td{color:var(--noir)}
.tableau tbody th{color:var(--noir);font-weight:600}
.tableau tbody + tbody{border-top:1px solid var(--bord)}
.tableau tbody tr:hover{background:#FAFBFF}


/* ==========================================================================
   8. BANDEAUX DE PAGE
   ========================================================================== */

/* banniere des pages internes, remplace le hero */
.banniere{position:relative;background:var(--pale);overflow:hidden;
  min-height:260px;display:flex;align-items:center;padding:44px 0}
.banniere .wrap{position:relative;z-index:2}
.banniere h1{max-width:20ch}
.banniere p{margin-top:16px;max-width:56ch}
.banniere-petales{position:absolute;inset:0;z-index:1;pointer-events:none}

/* fil d'Ariane */
.fil{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;
  font-size:13px;color:var(--texte);margin-bottom:18px}
.fil li{display:flex;align-items:center;gap:8px}
.fil li + li::before{content:"/";color:#A9AEBA}
.fil a{color:var(--texte);text-decoration:underline;text-underline-offset:3px}
.fil a:hover{color:var(--noir)}
.fil [aria-current="page"]{color:var(--noir);font-weight:500}

/* bandeau de conversion avant le pied de page */
.cta-final{background:var(--pale);padding:clamp(48px,6vw,80px) 0}
.cta-final .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-final h2{max-width:22ch}
.cta-final p{margin-top:14px;max-width:52ch}

/* apparition au defilement */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.vu{opacity:1;transform:none}


/* ==========================================================================
   9. AIDES RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .grille-4{grid-template-columns:repeat(2,1fr)}
  .grille-3{grid-template-columns:repeat(2,1fr)}
}

/* bascule du menu en tiroir sous 1100px */
@media (max-width:1100px){
  .burger{display:grid}
  .menu{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--bord);
    box-shadow:var(--ombre-h);padding:12px 0 22px}
  .menu.ouvert{display:flex}
  .nav{position:sticky}
  .nav .wrap{position:relative}
  .liens{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .liens > li{border-bottom:1px solid var(--bord)}
  .lien{width:100%;justify-content:space-between;padding:14px 0;font-size:15px}
  .lien::after{display:none}
  .sous{position:static;opacity:1;visibility:visible;transform:none;display:none;
    box-shadow:none;border:0;border-radius:0;padding:0 0 12px;min-width:0}
  .a-sous.ouvert > .sous{display:grid}
  .btn--nav{margin-top:18px;justify-content:center}
}

/* colonne unique sous 768px */
@media (max-width:768px){
  .hero-grille,.deux,.deux-cols,.grille-2,.grille-3,.grille-4,.args,.chiffres,.pied-haut{grid-template-columns:1fr}
  .deux-cols--inverse .deux-cols-media{order:0}
  .deux-cols--inverse .deux-cols-texte{order:0}
  .hero{min-height:auto;padding-top:32px}
  .hero-media img{border-radius:20px 90px 20px 20px}
  .encart{position:relative;left:0;bottom:0;margin-top:18px;max-width:none}
  .util .wrap{justify-content:center;padding-block:8px}
  .nav .wrap{min-height:64px}
  .banniere{min-height:0;padding:32px 0 36px}
  .petale{display:none}
  .marque span{display:block}
  .citation blockquote{max-width:none}
  .cta-final .wrap{display:block}
  .cta-final .btn{margin-top:24px}
  .tableau{min-width:640px;border-radius:0}
  .tableau-scroll{border:1px solid var(--bord)}
}

/* animations neutralisees si l'utilisateur les refuse */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important;
    animation-iteration-count:1 !important}
  .reveal{opacity:1;transform:none}
}


/* ==========================================================================
   10. FILET DE SECURITE SANS JAVASCRIPT
   Sans JS, tout le contenu reste visible, le menu et les reponses aussi.
   ========================================================================== */
html:not(.js) .reveal{opacity:1!important;transform:none!important}
html:not(.js) .acc-corps{grid-template-rows:1fr!important}
html:not(.js) .burger{display:none!important}
@media (max-width:1100px){
  html:not(.js) .menu{display:flex!important;position:static;box-shadow:none;padding:12px 0 18px;border:0}
  html:not(.js) .sous{position:static;opacity:1!important;visibility:visible!important;
    transform:none!important;display:grid!important;box-shadow:none;border:0;padding:0 0 12px;min-width:0}
}

/* survol et focus clavier sur grand ecran : le sous-menu s'ouvre sans clic */
@media (min-width:1101px){
  .a-sous:hover > .sous,
  .a-sous:focus-within > .sous{opacity:1;visibility:visible;transform:none}
  .a-sous:hover > .lien .lien-fleche,
  .a-sous:focus-within > .lien .lien-fleche{transform:rotate(180deg)}
}

/* ------------------------------------------------------------------
   Listes de contenu et groupes de champs
   Ajoutes apres coup : les pages en avaient besoin et le reset
   supprimait les puces des <ul> de contenu.
------------------------------------------------------------------ */
.liste{margin:0;padding-left:22px;color:var(--texte)}
.liste li{margin-top:8px}
.liste li::marker{color:var(--bleu)}
.liste--serree li{margin-top:4px}

.champ-groupe{border:0;padding:0;margin:0 0 30px}
.champ-groupe > legend{padding:0;margin-bottom:16px;font-weight:600;color:var(--noir);font-size:1.05rem}
.champ-groupe:last-of-type{margin-bottom:0}

/* ------------------------------------------------------------------
   Bandeau groupe : Diferance Print, filiale de Diferance
   Place juste au dessus du pied de page, sur toutes les pages.
   Aplat bleu de marque volontaire : c'est la seule rupture de teinte
   du site, elle signale qu'on change d'entite. Contrastes verifies,
   blanc sur #2B5CE6 donne 5,5 pour 1, les textes secondaires sont a
   90 pour cent d'opacite pour rester au dessus de 4,5 pour 1.
------------------------------------------------------------------ */
.groupe{background:var(--bleu);color:#fff;padding:clamp(48px,6vw,80px) 0}
.groupe-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,64px);align-items:center}
.groupe-marque{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px;
  font-weight:600;font-size:15px;letter-spacing:.04em;color:#fff}
.groupe h2{color:#fff;font-size:clamp(1.45rem,2.2vw,1.9rem);max-width:20ch}
.groupe-mot p{color:rgba(255,255,255,.9);margin-top:14px;max-width:46ch}
.groupe-btn{margin-top:28px}
.groupe-btn .btn{background:#fff;color:var(--noir);padding:18px 34px;font-size:13px}
.groupe-btn .btn:hover,.groupe-btn .btn:focus-visible{background:#fff;color:var(--bleu);
  transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.22)}
.groupe-titre{font-size:13px;font-weight:600;color:rgba(255,255,255,.9);margin:0 0 16px}
.groupe-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.groupe-liste a{display:inline-flex;align-items:center;padding:12px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.45);color:#fff;font-size:14px;font-weight:500;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.groupe-liste a:hover,.groupe-liste a:focus-visible{background:#fff;border-color:#fff;color:var(--bleu)}

@media (max-width:1100px){
  .groupe-in{grid-template-columns:1fr;gap:36px}
  .groupe h2,.groupe-mot p{max-width:none}
}
@media (max-width:520px){
  /* les pastilles deviennent des cibles pleine largeur, plus faciles a toucher */
  .groupe-liste{flex-direction:column}
  .groupe-liste li{display:flex}
  .groupe-liste a{flex:1 1 auto;justify-content:flex-start;padding:14px 20px}
  .groupe-btn .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .groupe-liste a,.groupe-btn .btn{transition:none}
  .groupe-btn .btn:hover{transform:none}
}


/* ==========================================================================
   11. BLOG : article et index
   Bloc ajoute apres coup pour le blog. Aucune ligne au dessus n'est modifiee.
   Meme langage "Petales" : Poppins, rayon 16px sur les cartes, 8px sur les
   boutons, ombre douce, couleurs prises dans les tokens.
   Les tableaux d'article reutilisent .tableau et .tableau-scroll, qui ne sont
   pas redefinis ici.
   ========================================================================== */

/* --- 11.1 Colonne de lecture ---------------------------------------------- */
/* 72 caracteres au maximum, centree, corps a 17px, interlignage confortable */
.art{max-width:72ch;margin-inline:auto;font-size:17px;line-height:1.8}
.art > p,.art > ul,.art > ol{color:var(--texte)}
.art p + p{margin-top:20px}
.art h2{font-size:clamp(1.4rem,2.4vw,1.75rem);margin:clamp(38px,5vw,56px) 0 16px;line-height:1.3}
.art h3{font-size:1.12rem;margin:32px 0 12px}
.art h2:first-child,.art h3:first-child{margin-top:0}
.art ul,.art ol{margin:20px 0;padding-left:24px;color:var(--texte)}
.art li{margin-top:10px}
.art li::marker{color:var(--bleu)}
.art > .tableau-scroll{margin:28px 0}
.art .tableau{font-size:15px}
.art a:not(.btn):not(.art-nav-lien){color:var(--bleu);text-decoration:underline;text-underline-offset:3px}
.art a:not(.btn):not(.art-nav-lien):hover{color:var(--noir)}
.art img{border-radius:var(--r-carte);margin:28px 0}
.art figure{margin:28px 0}
.art figcaption{font-size:13px;color:var(--texte);margin-top:10px}

/* --- 11.2 Bloc de titre d'article ----------------------------------------- */
/* Fond pale : fil d'Ariane, pastille de grappe, H1, ligne de metadonnees */
.art-tete{background:var(--pale);padding:clamp(34px,4.5vw,56px) 0 clamp(30px,4vw,48px)}
.art-tete .wrap{max-width:74ch}
.art-tete h1{font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.2;margin-top:4px}
.art-tete .pastille{margin-bottom:12px}
.art-tete .fil{margin-bottom:14px}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:20px;
  font-size:13px;color:var(--texte)}
.art-meta > span{display:inline-flex;align-items:center;gap:8px}
.art-meta > span + span::before{content:"";width:4px;height:4px;border-radius:999px;
  background:#A9AEBA;flex:none}
/* la section qui suit le bloc de titre respire moins en haut */
.art-tete + .sec{padding-top:clamp(30px,4vw,52px)}

/* --- 11.3 Encadre de reponse directe -------------------------------------- */
/* Le fragment que les moteurs generatifs extraient : blanc, filet bleu de 4px
   a gauche, ombre douce, texte legerement plus grand que le corps. */
.reponse{background:var(--blanc);border:1px solid var(--bord);border-left:4px solid var(--bleu);
  border-radius:4px var(--r-carte) var(--r-carte) 4px;box-shadow:var(--ombre);
  padding:24px 28px;margin:28px 0 8px}
.reponse p{color:var(--noir);font-size:18px;line-height:1.68}
.reponse p + p{margin-top:14px}
.reponse strong{font-weight:600}

/* --- 11.4 Encadre "A retenir" de fin d'article ---------------------------- */
.retenir{background:var(--pale);border-radius:var(--r-carte);padding:26px 30px;
  margin:clamp(38px,5vw,56px) 0 0}
.retenir h2,.retenir h3{font-size:1.1rem;margin:0 0 12px;letter-spacing:0}
.retenir p{color:var(--texte);font-size:16px}
.retenir p + p{margin-top:12px}

/* --- 11.5 CTA discret en ligne de texte, milieu d'article ----------------- */
/* Une seule ligne, un filet dessus et dessous, jamais de bouton */
.cta-ligne{border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);
  padding:18px 0;margin:clamp(34px,4.5vw,48px) 0;font-size:16px;color:var(--texte)}
.cta-ligne a{color:var(--bleu);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.cta-ligne a:hover{color:var(--noir)}

/* --- 11.6 Bloc de CTA de fin d'article ------------------------------------ */
/* Hierarchie imposee : audit gratuit en .btn noir, devis en .btn .btn--sec */
.cta-bloc{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r-carte);
  box-shadow:var(--ombre);padding:28px 30px;margin-top:clamp(28px,4vw,40px)}
.cta-bloc h2,.cta-bloc h3{font-size:1.2rem;margin:0 0 10px}
.cta-bloc p{color:var(--texte);font-size:16px;max-width:56ch}
.cta-bloc .actions{margin-top:20px}
@media (max-width:600px){
  .cta-bloc .actions .btn{flex:1 1 auto;justify-content:center}
}

/* --- 11.7 Navigation article precedent / article suivant ------------------ */
.art-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  margin-top:clamp(38px,5vw,56px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--bord)}
.art-nav-lien{display:flex;flex-direction:column;gap:6px;background:var(--blanc);
  border:1px solid var(--bord);border-radius:var(--r-carte);box-shadow:var(--ombre);
  padding:20px 22px;transition:transform .3s ease,box-shadow .3s ease}
.art-nav-lien:hover{transform:translateY(-3px);box-shadow:var(--ombre-h)}
.art-nav-lien small{font-size:12px;color:var(--texte);text-transform:uppercase;letter-spacing:.06em}
.art-nav-lien b{font-size:15px;font-weight:500;color:var(--noir);line-height:1.45}
.art-nav-lien--suivant{text-align:right;align-items:flex-end}

/* --- 11.8 Grille de cartes d'articles, index du blog ---------------------- */
/* 3 colonnes, 2 sous 900px, 1 sous 600px */
.art-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;margin:0;padding:0}
.art-liste > li{display:flex}
/* l'attribut hidden pose par le JS de filtrage doit primer sur display:flex */
.art-liste > li[hidden]{display:none}
.art-liste .carte{display:flex;flex-direction:column;width:100%;padding:26px}
/* la carte est un conteneur flex : la pastille ne doit pas s'etirer */
.art-liste .carte .pastille{align-self:flex-start}
.art-liste .carte .art-duree{align-self:flex-start}
.art-liste .carte h2,.art-liste .carte h3{font-size:1.05rem;line-height:1.4;margin:0 0 10px}
.art-liste .carte h2 a,.art-liste .carte h3 a{color:var(--noir)}
.art-liste .carte h2 a:hover,.art-liste .carte h3 a:hover{color:var(--bleu)}
.art-chapo{font-size:14px;color:var(--texte);display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.art-duree{margin-top:auto;padding-top:18px;font-size:13px;color:var(--texte);
  display:inline-flex;align-items:center;gap:8px}
@media (max-width:900px){
  .art-liste{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .art-liste{grid-template-columns:1fr}
  .art-nav{grid-template-columns:1fr}
  .art-nav-lien--suivant{text-align:left;align-items:flex-start}
}

/* --- 11.9 Filtres par grappe, index du blog ------------------------------- */
/* Pilules pilotees en JavaScript. Sans JavaScript elles sont masquees,
   voir la section 12, et toutes les cartes restent visibles. */
.filtres{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(26px,3.5vw,40px);
  list-style:none;padding:0}
.filtre{display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;
  border:1px solid var(--bord);background:#fff;color:#2A2D34;font-size:14px;font-weight:500;
  line-height:1.4;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.filtre:hover{background:var(--pale);border-color:#D8DEF0;color:var(--noir)}
.filtre[aria-pressed="true"]{background:var(--noir);border-color:var(--noir);color:#fff}
.filtres-total{font-size:13px;color:var(--texte);margin:0 0 clamp(26px,3.5vw,40px)}

/* --- 11.10 Reglages responsive et mouvement ------------------------------- */
@media (max-width:768px){
  .art{font-size:16px}
  .reponse{padding:20px 22px}
  .reponse p{font-size:17px}
  .retenir,.cta-bloc{padding:22px 24px}
}
@media (prefers-reduced-motion:reduce){
  .art-nav-lien,.filtre{transition:none}
  .art-nav-lien:hover{transform:none}
}


/* --- 11.11 Point de bascule de la navigation, remonte a 1260px ------------
   L'entree Blog porte la navigation a 7 entrees plus le bouton Audit gratuit.
   Mesure en Poppins : le logo, les 7 entrees et le bouton occupent 1096px.
   A 1440px la largeur utile du .wrap est de 1200px, la navigation tient donc
   sur une seule ligne. Entre 1101px et 1260px elle passait sur deux lignes :
   ce bloc etend le tiroir hamburger jusqu'a 1260px. Il duplique volontairement
   les regles du bloc 1100px plus haut, qui n'est pas modifie.
   -------------------------------------------------------------------------- */
@media (min-width:1101px) and (max-width:1260px){
  .burger{display:grid}
  .menu{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--bord);
    box-shadow:var(--ombre-h);padding:12px 0 22px}
  .menu.ouvert{display:flex}
  .nav .wrap{position:relative}
  .liens{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .liens > li{border-bottom:1px solid var(--bord)}
  .lien{width:100%;justify-content:space-between;padding:14px 0;font-size:15px}
  .lien::after{display:none}
  .sous{position:static;opacity:1;visibility:visible;transform:none;display:none;
    box-shadow:none;border:0;border-radius:0;padding:0 0 12px;min-width:0}
  .a-sous:hover > .sous,.a-sous:focus-within > .sous{display:none}
  .a-sous.ouvert > .sous{display:grid}
  .btn--nav{margin-top:18px;justify-content:center}
  html:not(.js) .menu{display:flex!important;position:static;box-shadow:none;padding:12px 0 18px;border:0}
  html:not(.js) .sous{display:grid!important;position:static;box-shadow:none;border:0;padding:0 0 12px;min-width:0}
}

/* ==========================================================================
   12. FILET DE SECURITE SANS JAVASCRIPT, PARTIE BLOG
   Sans JS : les filtres disparaissent et les 10 cartes restent visibles.
   ========================================================================== */
html:not(.js) .filtres{display:none!important}
html:not(.js) .filtres-total{display:none!important}
html:not(.js) .art-liste > li{display:flex!important}

/* ------------------------------------------------------------------
   Bandeau cookies
   Variante retenue : aplat bleu de marque, pleine largeur en bas.
   Contrainte CNIL respectee : refuser est aussi simple qu'accepter,
   les deux boutons ont la meme hauteur, la meme ligne et le meme
   nombre de clics. Aucun traceur non necessaire n'est depose avant
   un choix explicite.
------------------------------------------------------------------ */
.ck{position:fixed;z-index:80;left:0;right:0;bottom:0;
  background:var(--blanc);color:var(--noir);
  box-shadow:0 -8px 40px rgba(16,16,16,.14);
  font-size:14px;line-height:1.55}
.ck[hidden]{display:none}
.ck-in{display:grid;gap:20px;align-items:center;padding:24px 0}
.ck b{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
.ck p{color:var(--texte);margin:0;max-width:74ch}
.ck a{color:var(--bleu);text-decoration:underline;text-underline-offset:2px}
.ck-btn{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ck-btn .btn{padding:13px 22px;font-size:12px}
.ck-lien{background:none;border:0;padding:0;font:inherit;color:var(--texte);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ck-lien:hover{color:var(--noir)}

/* reglages detailles, communs aux trois variantes */
.ck-detail{border-top:1px solid var(--bord);padding:20px 0 4px}
.ck-detail[hidden]{display:none}
.ck-cat{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--bord)}
.ck-cat:last-of-type{border-bottom:0}
.ck-cat span{color:var(--texte);display:block;margin-top:3px;max-width:64ch}
.ck-fixe{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--vert-txt);
  background:var(--vert-pale);border-radius:999px;padding:6px 14px;white-space:nowrap}
.ck-int{flex:0 0 auto;position:relative;display:inline-block;width:46px;height:26px}
.ck-int input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ck-int i{position:absolute;inset:0;background:var(--bord);border-radius:26px;
  transition:background .18s ease;pointer-events:none}
.ck-int i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;
  background:#fff;border-radius:50%;transition:transform .18s ease;
  box-shadow:0 1px 3px rgba(16,16,16,.25)}
.ck-int input:checked + i{background:var(--bleu)}
.ck-int input:checked + i::after{transform:translateX(20px)}
.ck-int input:focus-visible + i{outline:2px solid var(--bleu);outline-offset:2px}
.ck-detail-btn{padding:16px 0 4px}

/* ---- traitement retenu : bandeau bleu, aligne sur le bloc groupe ---- */
.ck--c{background:var(--bleu);color:#fff;box-shadow:0 -8px 40px rgba(16,16,16,.28)}
.ck--c .ck-in{grid-template-columns:minmax(0,1fr) auto}
.ck--c p{color:rgba(255,255,255,.9)}
.ck--c a{color:#fff}
.ck--c .btn{background:#fff;color:var(--noir)}
.ck--c .btn--sec{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.ck--c .btn--sec:hover{background:#fff;color:var(--bleu);box-shadow:inset 0 0 0 1.5px #fff}
.ck--c .ck-lien{color:rgba(255,255,255,.9)}
.ck--c .ck-lien:hover{color:#fff}
.ck--c .ck-detail{border-top-color:rgba(255,255,255,.3)}
.ck--c .ck-cat{border-bottom-color:rgba(255,255,255,.22)}
.ck--c .ck-cat span{color:rgba(255,255,255,.9)}
.ck--c .ck-fixe{background:rgba(255,255,255,.16);color:#fff}
.ck--c .ck-int i{background:rgba(255,255,255,.3)}
.ck--c .ck-int input:checked + i{background:#fff}
.ck--c .ck-int input:checked + i::after{background:var(--bleu)}
@media (max-width:900px){ .ck--c .ck-in{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  .ck-int i,.ck-int i::after{transition:none}
}

/* libelle reserve aux lecteurs d'ecran */
.visuellement-cache{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* liens legaux du pied de page */
.copy-liens{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.copy-liens a{color:inherit}
.copy-liens button,.copy-liens [data-ck]{background:none;border:0;padding:0;font:inherit;
  color:inherit;cursor:pointer}
@media (max-width:600px){ .copy-liens{gap:8px 16px} }

/* Sous 600px, Refuser et Accepter restent cote a cote et de largeur egale.
   Exigence CNIL : refuser doit etre aussi simple et aussi visible qu'accepter.
   Personnaliser passe en dessous, c'est un troisieme choix, pas un egal. */
@media (max-width:600px){
  .ck-btn{width:100%}
  .ck-btn .btn{flex:1 1 0;justify-content:center;padding-inline:12px}
  .ck-btn .ck-lien{order:3;width:100%;margin-top:6px}
  .ck-cat{flex-wrap:wrap;gap:12px}
  .ck-detail-btn .btn{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------
   Piege a robots des formulaires.
   Le champ doit rester dans le flux pour qu'un automate le trouve,
   mais invisible et inatteignable au clavier pour un visiteur.
   display:none serait detecte par les robots les plus recents,
   d'ou le retrait hors cadre plutot que la suppression.
   --------------------------------------------------------------- */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------
   Illustration avec mention de source.
   La mention reste discrete mais lisible : sous 10 px un credit
   n'est plus dechiffrable, et une licence qui exige l'attribution
   n'est alors pas respectee. Le gris clair suffit a l'effacer
   visuellement sans la rendre illisible.
   --------------------------------------------------------------- */
.illu{margin:0 0 26px}
.illu img{display:block;width:100%;height:auto;border-radius:var(--r-carte)}
.credit{margin-top:6px;font-size:10px;line-height:1.4;color:#9AA0AC;letter-spacing:.01em}
.credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.credit a:hover{color:var(--texte)}