/* theagentcie.fr — charte v7. Généré, ne pas éditer à la main. */
@font-face{font-family:'Instrument Serif';src:url('fonts/InstrumentSerif-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('fonts/InstrumentSerif-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('fonts/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('fonts/IBMPlexMono-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/InstrumentSans-Variable.woff2') format('woff2');font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}

:root{--craie:#F6F3EC;--papier:#FFFDF8;--encre:#16150F;--graph:#6B6558;--trait:#E2DCCE;
--vert:#14483A;--vertnuit:#0E3428;--vertvif:#5BD39B;--ambre:#D2762B;--ambrecl:#F0C9A2}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--craie);color:var(--encre);
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--vert);text-decoration:none;border-bottom:1px solid rgba(20,72,58,.32)}
a:hover{border-bottom-color:var(--vert)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.etroit{max-width:720px}

/* --- en-tête --- */
header.top{border-bottom:1px solid var(--trait);background:var(--craie);position:sticky;top:0;z-index:40}
.top .wrap{display:flex;align-items:center;justify-content:space-between;
min-height:74px;flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}
nav.menu{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
nav.menu a{font-size:15px;color:var(--encre);border:0}
nav.menu a:hover{color:var(--vert)}
nav.menu a.actif{color:var(--vert);font-weight:600}

/* --- logotype composé en HTML --- */
.logo{display:inline-flex;align-items:baseline;border:0;white-space:nowrap;line-height:1}
.logo .mot{font-family:'Instrument Serif';font-size:31px;color:var(--encre);letter-spacing:-.005em}
.logo .ie{font-size:14px;border-bottom:1px solid currentColor;padding-bottom:1px;
position:relative;top:-8px;margin-left:.5px}
.logo .duo{display:inline-block;margin-left:8px;position:relative;top:-1px}
.logo .duo i{display:inline-block;width:3px;height:19px;vertical-align:baseline}
.logo .duo i.v{background:var(--vert)}
.logo .duo i.a{background:var(--ambre);margin-left:3px}
.pied .logo .mot,.sombre .logo .mot{color:var(--papier)}
.pied .logo .duo i.v,.sombre .logo .duo i.v{background:var(--vertvif)}

/* --- hero de l'accueil : le nom en grand, la promesse dessous ---------------
   Arbitrage d'Alexandre du 19/09 au soir : on voit le nom et la punchline en gros
   au milieu. Le logotype y est composé sans taille en dur : tout est en `em`,
   dérivé d'un seul `font-size` fluide, pour qu'il tienne de 390 px à 1440 px.
   24/09 (Sylvain) : « le bon logo est celui en haut à gauche ». Le grand logo est donc
   l'agrandissement exact de celui de l'en-tête (mot 29 px, ie 13 px remonté de 7 px,
   filets 3 × 17 px espacés de 3 px, 8 px après le ie) : chaque cote divisée par 29. */
.hero-nom{text-align:center;padding-top:10px}
.hero-nom .logo{font-size:clamp(46px,10.2vw,132px)}
.hero-nom .logo .mot{font-size:1em}
.hero-nom .logo .ie{font-size:.4483em;top:-.538em;margin-left:.038em;
border-bottom-width:.077em;padding-bottom:.077em}
.hero-nom .logo .duo{margin-left:.276em;top:-.0345em}
.hero-nom .logo .duo i{width:.1034em;height:.586em}
.hero-nom .logo .duo i.a{margin-left:.1034em}
.hero-nom h1{font-size:clamp(25px,3.5vw,42px);line-height:1.2;margin:18px auto 0;max-width:920px}
.hero-nom .chapo{max-width:700px;margin:24px auto 0}
.hero-nom .boutons{justify-content:center}
/* Le segment « repreneurs » dans « entrepreneurs » : le mot qui désigne le client
   est déjà dans le mot qui le flatte. Pas de gras : il garde la graisse du titre.
   24/09 (Sylvain) : titres en Instrument Sans (graisse 500, chasse 87,5 %), le logo
   seul reste en Instrument Serif. Tailles des h1, h2 et grands chiffres × 0,835 : la
   police est 20 % plus large, et un titre doit tenir sur une ligne. */
.seg{color:var(--ambre);text-decoration:underline;text-decoration-color:var(--ambre);
text-decoration-thickness:4px;text-underline-offset:7px}
@media (max-width:760px){
  .seg{text-decoration-thickness:3px;text-underline-offset:5px}
  .nb{display:none}}

/* --- boutons --- */
.btn{display:inline-block;background:var(--vert);color:var(--papier);border:1px solid var(--vert);
padding:13px 22px;font-size:15px;font-weight:600;border-radius:8px;cursor:pointer;
font-family:inherit;line-height:1.2;text-align:center}
.btn:hover{background:var(--vertnuit);border-color:var(--vertnuit);color:var(--papier)}
.btn.clair{background:transparent;color:var(--vert)}
.btn.clair:hover{background:rgba(20,72,58,.06);color:var(--vert)}
.btn.vif{background:var(--vertvif);border-color:var(--vertvif);color:var(--vertnuit)}
.boutons{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0}
.btn.vif:hover{background:#7ADDAF;border-color:#7ADDAF;color:var(--vertnuit)}

/* --- typographie --- */
h1,h2,h3{font-family:'Instrument Sans';letter-spacing:-.01em;margin:0;font-weight:500;font-stretch:87.5%}
h1{font-size:45px;line-height:1.06}
h2{font-size:27.5px;line-height:1.14;margin:46px 0 14px}
h3{font-size:24px;line-height:1.2;margin:32px 0 10px}
p{margin:0 0 18px}
.kick{font-family:'Plex Mono';font-size:12px;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--graph);margin:0 0 14px}
.chapo{font-size:21px;line-height:1.5;color:var(--encre)}
.mono{font-family:'Plex Mono'}
.gris{color:var(--graph)}
.filet{height:1px;background:var(--trait);border:0;margin:40px 0}
section{padding:64px 0}
section.serre{padding:44px 0}

/* --- les trois signes de brique (charte v7) --- */
.signe{display:block;margin-bottom:16px;line-height:0}
.signe i{display:block;height:2px;background:var(--vert);margin-bottom:5px}
.signe.conseil i:nth-child(1){width:44px}
.signe.conseil i:nth-child(2){width:30px}
.signe.conseil i:nth-child(3){width:17px}
.signe.execution{display:flex;gap:5px;align-items:center}
.signe.execution i{width:15px;height:15px;margin:0;background:transparent;border:2px solid var(--vert)}
.signe.execution i.plein{background:var(--ambre);border-color:var(--ambre)}
.signe.pilotage{display:flex;gap:3px;align-items:flex-end;height:22px}
.signe.pilotage i{width:5px;margin:0;background:var(--vertvif)}
.signe.pilotage i.c{background:var(--ambre)}

/* --- cartes et grilles --- */
.grille{display:flex;flex-wrap:wrap;gap:22px}
.col3{flex:1 1 300px}
.col2{flex:1 1 440px}
.carte{background:var(--papier);border:1px solid var(--trait);padding:28px 26px;border-radius:2px}
.carte h3{margin-top:0}
.sombre{background:var(--vertnuit);color:var(--papier)}
.sombre h1,.sombre h2,.sombre h3{color:var(--papier)}
.sombre p,.sombre li{color:#C8C3B4}
.sombre b,.sombre strong{color:var(--papier)}
.sombre .kick{color:var(--ambrecl)}
.sombre a{color:var(--vertvif);border-bottom-color:rgba(91,211,155,.4)}
.sombre .filet{background:rgba(255,253,248,.18)}

/* --- bloc L'essentiel (GEO : le bloc qu'une IA recopie) --- */
.essentiel{background:var(--papier);border:1px solid var(--trait);border-left:3px solid var(--ambre);
padding:24px 26px;margin:32px 0}
.essentiel ul{margin:0;padding-left:20px}
.essentiel li{margin-bottom:10px}
.essentiel li:last-child{margin-bottom:0}

/* --- article --- */
article.corps{font-size:18px}
article.corps p{margin-bottom:20px}
article.corps ul,article.corps ol{margin:0 0 20px;padding-left:22px}
article.corps li{margin-bottom:8px}
.meta{font-family:'Plex Mono';font-size:12.5px;color:var(--graph);
display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:20px}
.signature{border-top:1px solid var(--trait);margin-top:44px;padding-top:24px;display:flex;
gap:18px;align-items:flex-start;flex-wrap:wrap}
.signature .txt{flex:1 1 320px}
table{width:100%;border-collapse:collapse;font-size:15.5px;margin:0 0 24px}
th{font-family:'Plex Mono';font-size:11.5px;font-weight:500;letter-spacing:.1em;
text-transform:uppercase;color:var(--graph);text-align:left;padding:0 14px 9px 0;
border-bottom:1px solid var(--trait)}
td{padding:11px 14px 11px 0;border-bottom:1px solid var(--trait);vertical-align:top;line-height:1.5}
.tableau{overflow-x:auto}
.faq dt{font-weight:600;margin-top:22px}
.faq dd{margin:7px 0 0;color:var(--graph)}

/* --- liste d'articles --- */
.liste a.item{display:block;border:0;border-top:1px solid var(--trait);padding:24px 0}
.liste a.item:last-child{border-bottom:1px solid var(--trait)}
.liste a.item:hover{background:rgba(20,72,58,.025)}
.liste .t{font-family:'Instrument Sans';font-size:26px;line-height:1.16;color:var(--encre);font-weight:500;font-stretch:87.5%}
.liste a.item:hover .t{color:var(--vert)}
.liste .d{color:var(--graph);margin-top:7px;font-size:16px}

/* --- bandeau d'appel --- */
.appel{background:var(--vertnuit);color:var(--papier);padding:54px 0;margin-top:70px}
.appel h2{margin-top:0;color:var(--papier)}
.appel p{color:#C8C3B4;max-width:620px}

/* --- formulaire --- */
.champ{margin-bottom:18px}
.champ label{display:block;font-size:14.5px;font-weight:600;margin-bottom:6px}
.champ .aide{font-weight:400;color:var(--graph);font-size:13.5px}
.champ input,.champ textarea,.champ select{width:100%;font-family:inherit;font-size:16px;
padding:12px 13px;border:1px solid var(--trait);background:var(--papier);color:var(--encre);
border-radius:2px}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:2px solid var(--vert);
outline-offset:-1px;border-color:var(--vert)}
.champ textarea{min-height:110px;resize:vertical}
.pot{position:absolute;left:-9999px}

/* --- modale --- */
.modale[hidden]{display:none!important}
.modale{position:fixed;inset:0;z-index:90;background:rgba(14,52,40,.55);
padding:24px;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center}
.modale .boite{background:var(--craie);max-width:640px;width:100%;margin:auto;
padding:36px 34px;border-radius:3px;position:relative}
.modale .fermer{position:absolute;top:12px;right:14px;background:none;border:0;
font-size:26px;line-height:1;cursor:pointer;color:var(--graph);padding:6px}

/* --- pied --- */
.pied{background:var(--vertnuit);color:#C8C3B4;padding:56px 0 34px}
.pied a{color:var(--papier);border-bottom-color:rgba(255,253,248,.3)}
.pied .cols{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.pied .bas{border-top:1px solid rgba(255,253,248,.16);margin-top:34px;padding-top:18px;
font-family:'Plex Mono';font-size:12px;display:flex;flex-wrap:wrap;gap:18px;
justify-content:space-between}

@media (max-width:860px){
  h1{font-size:31.5px}
  h2{font-size:22.5px}
  .chapo{font-size:19px}
  body{font-size:16.5px}
  section{padding:46px 0}
  .top .wrap{min-height:0}
  nav.menu{gap:18px;width:100%;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;
  padding-bottom:6px;-webkit-overflow-scrolling:touch}
  nav.menu a{flex:0 0 auto}
  .boutons .btn{flex:1 1 220px}
  .appel{padding:42px 0;margin-top:48px}
  .carte{padding:24px 20px}}

/* ================================================================= FOND VERT
   Arbitrage d'Alexandre du 19/09/2026 : variante B. L'accueil et les trois pages
   d'offre passent en vert nuit ; les guides, le blog et les articles restent en
   craie, parce qu'un texte long se lit plus vite et se quitte moins sur fond clair.
   Tout est porté par la classe `vert` sur <body>, et strictement limité à
   <header> et <main> : la modale du formulaire et le pied gardent leur traitement. */
body.vert .seg,.sombre .seg,.appel .seg{color:var(--ambrecl)}
body.vert{background:var(--vertnuit);color:var(--papier)}
body.vert header.top{background:var(--vertnuit);border-bottom-color:rgba(255,253,248,.16)}
body.vert header.top .logo .mot{color:var(--papier)}
body.vert header.top .logo .duo i.v{background:var(--vertvif)}
body.vert nav.menu a{color:var(--papier)}
body.vert nav.menu a:hover,body.vert nav.menu a.actif{color:var(--vertvif)}
body.vert header.top .btn{background:var(--vertvif);border-color:var(--vertvif);color:var(--vertnuit)}
body.vert header.top .btn:hover{background:#7ADDAF;border-color:#7ADDAF}
body.vert main h1,body.vert main h2,body.vert main h3{color:var(--papier)}
body.vert main p,body.vert main li,body.vert main dd{color:#C8C3B4}
body.vert main .chapo,body.vert main b,body.vert main strong{color:var(--papier)}
body.vert main .kick{color:var(--ambrecl)}
body.vert main .logo .mot{color:var(--papier)}
body.vert main .logo .duo i.v{background:var(--vertvif)}
body.vert main .gris{color:#A8A395}
body.vert main a{color:var(--vertvif);border-bottom-color:rgba(91,211,155,.35)}
body.vert main a:hover{border-bottom-color:var(--vertvif)}
body.vert main .filet,body.vert main hr.filet{background:rgba(255,253,248,.18)}
body.vert main .carte{background:#123E30;border-color:rgba(255,253,248,.14)}
body.vert main .essentiel{background:#123E30;border-color:rgba(255,253,248,.14);
border-left-color:var(--ambre)}
body.vert main .btn{background:var(--vertvif);border-color:var(--vertvif);color:var(--vertnuit)}
body.vert main .btn:hover{background:#7ADDAF;border-color:#7ADDAF;color:var(--vertnuit)}
body.vert main .btn.clair{background:transparent;color:var(--papier);
border-color:rgba(255,253,248,.45)}
body.vert main .btn.clair:hover{background:rgba(255,253,248,.08);color:var(--papier)}
body.vert main .signe i{background:var(--vertvif)}
body.vert main .signe.execution i{border-color:var(--vertvif);background:transparent}
body.vert main .signe.execution i.plein{background:var(--ambre);border-color:var(--ambre)}
body.vert main .liste a.item{border-top-color:rgba(255,253,248,.16)}
body.vert main .liste a.item:last-child{border-bottom-color:rgba(255,253,248,.16)}
body.vert main .liste .t{color:var(--papier)}
body.vert main .liste a.item:hover .t{color:var(--vertvif)}
body.vert main .liste a.item:hover{background:rgba(255,253,248,.03)}
body.vert main .liste .d{color:#A8A395}
body.vert main th{color:var(--ambrecl);border-bottom-color:rgba(255,253,248,.18)}
body.vert main td{border-bottom-color:rgba(255,253,248,.12)}
body.vert main .meta{color:#A8A395}
body.vert main .signature{border-top-color:rgba(255,253,248,.18)}
/* le bandeau d'appel est deja vert nuit : sur fond vert il lui faut un cran de plus */
body.vert main .appel{background:#0A2A20}

/* ============================================= GABARIT MAGAZINE (articles, guides)
   Demande d'Alexandre du 19/09/2026 : reprendre le traitement presse du blog SEO,
   avec des encadres portant les chiffres et les phrases cles. Deux colonnes, un rail
   qui suit la lecture, une lettrine, des exergues, des tableaux en carte. */
.mag-hero{padding-top:56px}
.mag-hero h1{font-size:39px;max-width:860px}
.mag-byline{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-top:28px;
padding:13px 0;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);
font-family:'Plex Mono';font-size:12.5px;color:var(--graph)}
.mag-byline b{color:var(--encre);font-weight:500}
.mag-byline .p{color:var(--trait)}
.mag-grille{display:flex;flex-wrap:wrap;gap:46px;align-items:flex-start;padding:36px 0 64px}
.mag-col{flex:1 1 580px;min-width:0;max-width:700px;order:1}
.mag-rail{flex:0 1 264px;order:2;position:sticky;top:98px}

.rail{border:1px solid var(--trait);background:var(--papier);padding:18px;margin-bottom:18px}
.rail .rh{font-family:'Plex Mono';font-size:11px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--graph);margin:0 0 12px}
.rail.som a{display:block;font-size:14.5px;line-height:1.34;color:var(--encre);border:0;
padding:7px 0 7px 13px;border-left:2px solid var(--trait)}
.rail.som a:hover{color:var(--vert);border-left-color:var(--ambre)}
.rail.chiffre{background:var(--vertnuit);border-color:var(--vertnuit)}
.rail.chiffre .rh{color:var(--ambrecl)}
.rail.chiffre .grand{font-family:'Instrument Sans';font-size:42px;line-height:1;
color:var(--papier);display:block;font-weight:500;font-stretch:87.5%}
.rail.chiffre .leg{font-size:14px;line-height:1.45;color:#C8C3B4;margin:11px 0 0}
.rail.cta{background:rgba(20,72,58,.05);border-color:rgba(20,72,58,.14)}
.rail.cta p{font-size:14.5px;line-height:1.5;margin:0 0 14px}
.rail.cta .btn{display:block;width:100%;padding:11px 10px;font-size:14.5px}

.mag-corps{font-size:18.5px;line-height:1.72}
.mag-corps>p:first-of-type::first-letter{float:left;font-family:'Instrument Sans';
font-size:56px;line-height:.76;color:var(--vert);padding:7px 12px 0 0;font-weight:500;font-stretch:87.5%}
.mag-corps p{margin:0 0 21px}
.mag-corps h2{font-size:25px;line-height:1.14;margin:46px 0 13px}
.mag-corps h3{font-size:22px;margin:34px 0 9px}
.mag-corps ul{list-style:none;margin:0 0 21px;padding-left:2px}
.mag-corps ul li{position:relative;padding-left:22px;margin:.5em 0}
.mag-corps ul li:before{content:"";position:absolute;left:1px;top:.7em;width:8px;height:2px;
background:var(--ambre)}
.mag-corps ol{margin:0 0 21px;padding-left:24px}
.mag-corps table{background:var(--papier);border:1px solid var(--trait);font-size:15.5px}
.mag-corps th{padding:13px 16px 11px;background:var(--craie);border-bottom:1px solid var(--trait)}
.mag-corps td{padding:13px 16px}

/* une citation du corps devient une exergue, pas un bloc a part */
.mag-corps blockquote.essentiel,.exergue{background:none;border:0;
border-left:4px solid var(--ambre);padding:2px 0 2px 26px;margin:38px 0}
.mag-corps blockquote.essentiel p,.exergue p{font-family:'Instrument Sans';font-size:27px;
line-height:1.26;color:var(--encre);margin:0;font-weight:500;font-stretch:87.5%}
.exergue .att{font-family:'Plex Mono';font-size:11.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--graph);margin:12px 0 0;display:block}

/* encadres : le repere et le chiffre */
.encadre{background:var(--papier);border:1px solid var(--trait);border-left:3px solid var(--vert);
padding:23px 25px;margin:34px 0}
.encadre .lab{font-family:'Plex Mono';font-size:11px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--vert);margin:0 0 10px}
.encadre .tt{font-family:'Instrument Sans';font-size:21px;line-height:1.2;margin:0 0 9px;color:var(--encre);font-weight:500;font-stretch:87.5%}
.encadre p{font-size:16.5px;line-height:1.58;color:var(--graph);margin:0}
.encadre p+p{margin-top:12px}
.encadre ul{margin:0;padding-left:0;list-style:none}
.encadre li{position:relative;padding-left:20px;font-size:16.5px;line-height:1.55;
color:var(--graph);margin-bottom:11px}
.encadre li:last-child{margin-bottom:0}
.encadre li:before{content:"";position:absolute;left:0;top:.68em;width:7px;height:2px;
background:var(--vert)}
.encadre li b,.encadre p b{color:var(--encre);font-weight:600}
.encadre.nombre{border-left-color:var(--ambre);display:flex;flex-wrap:wrap;gap:8px 26px;
align-items:baseline}
.encadre.nombre .n{font-family:'Instrument Sans';font-size:45px;line-height:.95;
color:var(--vert);flex:0 0 auto;font-weight:500;font-stretch:87.5%}
.encadre.nombre .t{flex:1 1 300px}
.encadre.nombre .t p{color:var(--encre);font-size:17px}
.encadre.nombre .t .src{color:var(--graph);font-size:14.5px;margin-top:8px}

@media (max-width:1000px){
  .mag-rail{position:static;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:18px}
  .mag-rail .rail{flex:1 1 280px;margin-bottom:0}
  .mag-rail .rail.som{display:none}}
@media (max-width:860px){
  .mag-hero{padding-top:38px}
  .mag-hero h1{font-size:29px}
  .mag-grille{gap:30px;padding-top:26px}
  .mag-corps{font-size:17.5px}
  .mag-corps h2{font-size:21.5px;margin-top:38px}
  .mag-corps>p:first-of-type::first-letter{font-size:54px;padding-right:10px}
  .mag-corps blockquote.essentiel p,.exergue p{font-size:23px}
  .encadre{padding:20px 21px}
  .encadre.nombre .n{font-size:44px}}

/* ============================================= RESPIRATION RESSERREE
   Demande de Sylvain du 21/09/2026 : sur l'accueil et les trois pages d'offre,
   voir plus de choses au premier ecran. Porte par la classe `dense` sur <body>,
   donc sans effet sur le blog et les guides, ou l'air aide la lecture longue. */
body.dense section{padding:40px 0}
body.dense section.serre{padding:28px 0}
body.dense .hero-nom{padding-top:0}
body.dense .hero-nom h1{margin-top:12px}
body.dense .hero-nom .chapo{margin-top:16px}
body.dense .boutons{margin-top:22px}
body.dense h2{margin:30px 0 12px}
body.dense h3{margin:24px 0 9px}
body.dense p{margin-bottom:14px}
body.dense .filet{margin:28px 0}
body.dense .grille{gap:18px}
body.dense .carte{padding:22px 22px}
body.dense .essentiel{padding:20px 22px;margin:24px 0}
body.dense .liste a.item{padding:18px 0}
body.dense table{margin-bottom:18px}
body.dense .faq dt{margin-top:17px}
body.dense .appel{padding:40px 0;margin-top:46px}
@media (max-width:760px){
  body.dense section{padding:30px 0}
  body.dense section.serre{padding:22px 0}}

/* Le grand blanc sous l'accroche etait la somme de deux valeurs : le bas de la
   premiere section et la marge haute du premier bloc de la suivante. On annule
   la seconde et on reduit la premiere. (Sylvain, 21/09/2026) */
body.dense main>section:first-of-type{padding-bottom:24px}
body.dense section>.wrap>:first-child{margin-top:0}

/* ============================================= FORMULAIRE COMPACT
   Demande de Sylvain du 21/09/2026 : tenir en un ecran, et des bords arrondis.
   Les quatre champs courts passent sur deux colonnes ; l'adresse, la situation
   et le message gardent toute la largeur. Repli sur une colonne en dessous de
   560 px, ou deux colonnes rendraient les champs illisibles. */
.formulaire{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.formulaire>*{grid-column:1 / -1}
.formulaire .champ:has(input[name="nom"]),
.formulaire .champ:has(input[name="entreprise"]),
.formulaire .champ:has(input[name="email"]),
.formulaire .champ:has(input[name="telephone"]){grid-column:span 1}
.formulaire .champ{margin-bottom:11px}
/* Deux champs cote a cote n'ont pas le meme libelle : « L'entreprise » porte une aide
   qui passe sur deux lignes, « Votre nom » non. Sans cela le second champ descend d'une
   ligne. Chaque case etant etiree a la hauteur de la rangee, on colle la saisie en bas :
   les deux champs tombent alors sur la meme ligne, quel que soit le repli du libelle. */
.formulaire .champ{display:flex;flex-direction:column}
.formulaire .champ input,.formulaire .champ select,.formulaire .champ textarea{margin-top:auto}
.formulaire .champ label{margin-bottom:4px;font-size:14px}
.formulaire .champ .aide{font-size:12.5px}
.formulaire .champ input,.formulaire .champ textarea,.formulaire .champ select{
padding:9px 12px;font-size:15.5px;border-radius:8px}
.formulaire .champ textarea{min-height:70px}
.formulaire .btn{border-radius:8px}
.modale .boite{border-radius:14px;padding:28px 30px}
.modale .boite h2{font-size:22.5px;line-height:1.12}
.modale .boite>.gris{margin-bottom:16px;font-size:15px}
@media (max-width:560px){
  .formulaire{grid-template-columns:1fr}
  .formulaire .champ{grid-column:1 / -1}}

/* Les titres d'accroche tenaient sur deux lignes a cause d'une coupure posee en dur.
   Coupure retiree (Sylvain, 21/09/2026) : la taille devient fluide et plafonne assez bas
   pour que la phrase tienne sur une ligne sur un ecran d'ordinateur. Quand elle doit
   quand meme se replier, `text-wrap: balance` equilibre les deux lignes au lieu de
   laisser un mot seul en bas. */
main section h1{font-size:clamp(24px,3.01vw,38.5px);line-height:1.08;text-wrap:balance}
main section h2{text-wrap:balance}

/* ============================================= APPEL A L'ACTION ET PIED
   Demande de Sylvain du 21/09/2026 : bouton du bandeau a droite et plus gros,
   pied de page plus compact, et son lien de contact rendu visible. */

/* Le bandeau passe en deux colonnes : le texte a gauche, le bouton a droite,
   centre verticalement. Les enfants sont des freres (signe, titre, texte, bouton),
   on les place donc explicitement plutot que de les envelopper. */
.appel .wrap{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;
column-gap:48px;align-items:center}
.appel .wrap>*{grid-column:1}
/* Les trois lignes de gauche (signe, titre, texte) forment la grille explicite : sans
   `grid-template-rows`, le `-1` ci-dessous designe la premiere ligne et le bouton reste
   colle en haut. C'est ce qui s'etait produit le 21/09. */
.appel .wrap>p:last-child{grid-column:2;grid-row:2 / -1;align-self:center;margin:0;display:flex}
.appel .wrap>p:last-child .btn{display:flex;align-items:center;justify-content:center;
font-size:18px;padding:20px 36px;border-radius:10px;white-space:nowrap}

/* Le pied : moins haut, et le lien qui compte prend l'allure d'un bouton. */
.pied{padding:34px 0 22px}
.pied .cols{gap:28px 40px}
.pied .bas{margin-top:24px;padding-top:14px}
/* Le lien d'audit du pied a ete retire le 21/09 : un seul appel par page,
   celui du bandeau juste au-dessus. */

@media (max-width:760px){
  /* a l'etroit, le bouton repasse sous le texte plutot que de le comprimer */
  .appel .wrap{grid-template-columns:1fr;grid-template-rows:none}
  .appel .wrap>p:last-child{grid-column:1;grid-row:auto;margin-top:24px;display:block}
  .appel .wrap>p:last-child .btn{display:inline-block;width:auto;min-height:0;
  font-size:17px;padding:16px 30px}}


/* ============================================= TEXTE JUSTIFIE
   Demande de Sylvain du 21/09/2026. Seuls les paragraphes de corps sont concernes :
   le chapo, les surtitres et les legendes restent au fer a gauche, comme en edition.
   `hyphens:auto` agit parce que les pages declarent lang="fr" : sans cesure, une
   ligne justifiee de 700 px s'etire en trous blancs des qu'un mot long arrive. */
main section .wrap>p,
main section .wrap>ul>li,
.faq dd,
.mag-corps>p{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
main section .wrap>p.kick{text-align:left;-webkit-hyphens:manual;hyphens:manual}
@media (max-width:560px){
  /* colonne trop etroite : justifier y fabrique plus de trous que de tenue */
  main section .wrap>p,
  main section .wrap>ul>li,
  .faq dd,
  .mag-corps>p{text-align:left}}

/* Demande de Sylvain du 28/09/2026 : « Et toujours tous les textes justifies. » Le chapo,
   les notes grises, les legendes et les sources passent en justifie comme le reste. Restent
   au fer a gauche : surtitres et etiquettes d'une ligne, et ce qui imite un ecran.
   Demande de Sylvain du 24/09/2026 : « justifier les textes dans les blocs ». Meme regle
   pour les paragraphes places dans une carte, une colonne ou un volet, et pas seulement
   ceux poses directement dans la colonne de texte. Restent au fer a gauche : surtitres,
   chapo, notes grises, legendes, sources, et tout ce qui imite un ecran (page du lundi,
   telephone, document de restitution), ou la justification n'a pas de sens. */
main section p,
main section li,
main section dd,
.dg-tuiles .q{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
main section p.kick,main section p.lab,main section p.tt,
main section p.ft,main section p.t,main section p.s,
main section figure p,main section figure li,
main section .tdb p,main section .tdb li,
main section .pg-board p,main section .pg-board li,
main section .pg-tel p,main section .pg-tel li,
main section .dg-resti .doc p,main section .dg-resti .doc li,
main section [style*="text-align:center"]{text-align:left;-webkit-hyphens:manual;hyphens:manual}
main section p[style*="text-align:center"]{text-align:center}
@media (max-width:560px){
  main section p,main section li,main section dd,.dg-tuiles .q{text-align:left}}

/* ============================================= PIED RESSERRE ET BOUTON RECENTRE
   Demande de Sylvain du 23/09/2026 : « resserrer le pied de page qui est trop long, et
   decaler le bouton audit plus a gauche pour qu'il soit au centre de l'espace vide ».

   Le bouton : la colonne de gauche prend exactement la largeur du texte (620 px, le
   plafond du paragraphe), la colonne de droite est tout l'espace qui reste, et le bouton
   s'y centre. Avant, la colonne de droite faisait la largeur du bouton, colle au bord.
   Reserve a l'ordinateur : sous 760 px le bandeau repasse sur une colonne. */
@media (min-width:761px){
  .appel .wrap{grid-template-columns:minmax(0,620px) 1fr;column-gap:0}
  .appel .wrap>p:last-child{justify-self:center}}
/* Le pied : moins de vide au-dessus et au-dessous, et des listes de liens moins aerees.
   L'interligne des listes et la largeur de la phrase d'accroche sont ecrits en ligne dans
   chaque page (style="line-height:1.85", "max-width:330px") : seul !important les
   reprend, et il les reprendra aussi sur les pages publiees plus tard. */
.appel{padding:32px 0}
.pied{padding:26px 0 18px}
.pied .cols p[style*="line-height"]{line-height:1.6!important}
.pied .cols>div:first-child p{max-width:430px!important;margin-top:10px!important}
.pied .bas{margin-top:18px;padding-top:12px}
/* Second tour (Sylvain, 23/09) : « diminuer l'espace entre les barres et le Combien, et
   l'autre espace entre les deux blocs ». Le premier venait d'une regle qu'on ne voyait pas :
   `body.dense h2{margin:30px 0 12px}` l'emporte sur `.appel h2{margin-top:0}` (un
   selecteur de plus), d'ou 30 px de vide sous les barres. Le second additionnait le bas du
   bandeau, la marge du dernier paragraphe et le haut du pied : 76 px, ramenes a 40. */
body.dense .appel h2{margin-top:0}
.appel .signe{margin-bottom:8px}
.appel .wrap>p:not(:last-child){margin-bottom:0}
.appel{padding:28px 0 22px}
.pied{padding-top:18px}