/* Tallyra — site public. Charte : site/BRIEF.md §2. Un seul fichier, pas de compilation. */
:root{
  --ink:#13203A;--papier:#F6F7FB;--blanc:#fff;--muted:#5A6478;--filet:#DDE2EC;--signal:#2446D8;--surligneur:#FFE14D;--succes:#1E7F4F;--alerte:#B42318;
  --f-titre:"Bricolage Grotesque",system-ui,sans-serif;
  --f-texte:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r1:6px;--r2:12px;--r3:20px;
  --ombre:0 1px 2px rgba(19,32,58,.06),0 8px 24px rgba(19,32,58,.06);
  --section:48px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:400 16px/26px var(--f-texte);color:var(--ink);background:var(--papier);overflow-wrap:break-word}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--signal);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--f-titre);letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-weight:800;font-size:34px;line-height:40px}
h2{font-weight:800;font-size:28px;line-height:34px}
h3{font-weight:700;font-size:20px;line-height:26px}
p{margin:0 0 16px}
ul,ol{margin:0;padding:0}
.chapeau{font-size:18px;line-height:28px;color:var(--muted)}
.petit{font-size:14px;line-height:20px;color:var(--muted)}
.mono{font-family:var(--f-mono);font-weight:700;font-variant-numeric:tabular-nums}
.cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:16px;top:-60px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:var(--r1);z-index:20}
.evitement:focus{top:8px}

/* Le geste de marque : un coup de surligneur, un seul mot par titre */
mark{background:none;color:var(--ink);position:relative;display:inline-block;padding:0 .12em;isolation:isolate}
mark::before{content:"";position:absolute;z-index:-1;inset:.12em -.04em .04em;background:var(--surligneur);border-radius:3px 9px 4px 8px/8px 4px 9px 3px;transform:rotate(-1.2deg)}

.contenu{max-width:1152px;margin:0 auto;padding:0 16px}
.section{padding:var(--section) 0}
[id]{scroll-margin-top:80px}
.section>.contenu>h2{margin-bottom:12px}
.section .intro{max-width:760px;margin-bottom:28px;color:var(--muted)}
.sombre{background:var(--ink);color:#fff}
.sombre .intro,.sombre .petit{color:#C5CCDC}
.sombre a{color:#fff}
.blanche{background:var(--blanc);border-block:1px solid var(--filet)}

/* En-tête */
.entete{background:var(--blanc);border-bottom:1px solid var(--filet);position:sticky;top:0;z-index:10}
.entete .contenu{display:flex;align-items:center;gap:12px;min-height:64px}
.entete .logo{display:block;flex:none}
.entete .logo img{height:34px;width:auto}
.entete nav{margin-left:auto;display:none;gap:24px;align-items:center}
.entete nav a{color:var(--ink);text-decoration:none;font-weight:500}
.entete nav a:hover{text-decoration:underline}
.entete .btn{margin-left:auto}
@media(min-width:900px){.entete nav{display:flex}.entete .btn{margin-left:0}}

/* Boutons : une seule couleur d'action */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px/24px var(--f-texte);padding:12px 20px;border-radius:var(--r2);border:2px solid var(--signal);background:var(--signal);color:#fff;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{background:#1C38B4;border-color:#1C38B4}
.btn.second{background:var(--blanc);color:var(--signal)}
.btn.second:hover{background:#EEF1FD}
.btn.compact{padding:8px 14px;font-size:15px}
.btn[disabled]{opacity:.6;cursor:progress}
.sombre .btn.second{background:transparent;color:#fff;border-color:#fff}
.sombre .btn.second:hover{background:rgba(255,255,255,.1)}
.boutons{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 12px}
.lien-bouton{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--signal);text-decoration:underline;text-underline-offset:.18em;cursor:pointer}

/* Accueil : bloc d'ouverture */
.ouverture{padding:40px 0 var(--section)}
.ouverture .grille{display:grid;gap:32px;align-items:center}
.ouverture h1{margin-bottom:16px}
.visuel{position:relative;padding-bottom:72px}
.visuel picture img{border-radius:var(--r3);width:100%;aspect-ratio:16/9;object-fit:cover}
.reponse-ia{position:absolute;left:12px;right:12px;bottom:0;background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r2);box-shadow:var(--ombre);padding:14px 16px;font-size:15px;line-height:22px}
.reponse-ia p{margin:0 0 6px}
.reponse-ia p:last-child{margin:0}
.reponse-ia .role{font:500 12px/16px var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;display:block}
.reponse-ia .etiquette{position:absolute;top:10px;right:12px;font:500 12px/16px var(--f-texte);color:var(--muted);border:1px solid var(--filet);border-radius:99px;padding:1px 8px;background:var(--papier)}
@media(min-width:900px){
  .ouverture{padding:72px 0 var(--section)}
  .ouverture .grille{grid-template-columns:1.05fr 1fr;gap:56px}
  .reponse-ia{left:-32px;right:32px}
}

/* Cartes */
.cartes{display:grid;gap:16px;list-style:none}
.carte{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r2);box-shadow:var(--ombre);padding:24px}
.carte h3{margin-bottom:8px}
.carte p:last-child{margin:0}
@media(min-width:800px){.cartes.trois{grid-template-columns:repeat(3,1fr)}.cartes.deux{grid-template-columns:repeat(2,1fr)}}

/* Étapes numérotées */
.etapes{display:grid;gap:16px;list-style:none;counter-reset:etape}
.etapes li{counter-increment:etape;background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r2);box-shadow:var(--ombre);padding:24px}
.etapes li::before{content:counter(etape);display:block;font:700 28px/32px var(--f-mono);color:var(--signal);margin-bottom:8px}
.etapes h3{margin-bottom:8px}
.etapes p{margin:0}
@media(min-width:800px){.etapes{grid-template-columns:repeat(3,1fr)}}

/* Livrables mensuels */
.livrables{list-style:none;display:grid;gap:0;background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r2);box-shadow:var(--ombre);overflow:hidden}
.livrables li{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:baseline;padding:14px 20px;border-bottom:1px solid var(--filet)}
.livrables li:last-child{border-bottom:0}
.livrables .mono{font-size:22px;line-height:28px;color:var(--signal);text-align:right}
.livrables .sans-chiffre{grid-column:2}

/* Métiers */
.metiers{display:grid;gap:16px;list-style:none;grid-template-columns:repeat(2,1fr)}
.metiers img{border-radius:var(--r3);width:100%;aspect-ratio:4/3;object-fit:cover}
.metiers h3{font-size:17px;line-height:22px;margin:12px 0 4px}
.metiers p{margin:0;font-size:14px;line-height:20px;color:var(--muted)}
@media(min-width:900px){.metiers{grid-template-columns:repeat(4,1fr);gap:24px}.metiers h3{font-size:20px;line-height:26px}}

/* Tarifs */
.encadre-audit{background:var(--blanc);border:2px solid var(--ink);border-radius:var(--r2);padding:24px;display:grid;gap:16px;align-items:center;margin-bottom:24px}
.encadre-audit p{margin:0}
.encadre-audit strong{font-family:var(--f-titre);font-size:22px;line-height:28px;letter-spacing:-.02em;display:block;margin-bottom:4px}
@media(min-width:800px){.encadre-audit{grid-template-columns:1fr auto}}
.defile{position:relative;overflow-x:auto;border:1px solid var(--filet);border-radius:var(--r2);background:var(--blanc);box-shadow:var(--ombre)}
.defile:focus-visible{outline-offset:-2px}
table.tarifs{width:100%;min-width:720px;border-collapse:collapse;font-size:15px;line-height:22px}
.tarifs th,.tarifs td{padding:12px 16px;border-bottom:1px solid var(--filet);text-align:left;vertical-align:top}
.tarifs tr:last-child th,.tarifs tr:last-child td{border-bottom:0}
.tarifs thead th{font:700 20px/26px var(--f-titre);letter-spacing:-.02em;background:var(--papier)}
.tarifs thead th small{display:block;font:600 12px/16px var(--f-texte);letter-spacing:0;color:var(--succes);margin-top:2px}
.tarifs tbody th{font-weight:500;color:var(--muted);width:30%}
.tarifs .prix{font-family:var(--f-mono);font-weight:700;font-size:18px;white-space:nowrap}
.tarifs .prix span{font:400 13px/18px var(--f-texte);color:var(--muted)}
.tarifs .reco{background:#F4F6FE}
.tarifs td .mono{font-size:16px}
.indication-defilement{margin:8px 0 0}
@media(min-width:760px){.indication-defilement{display:none}}

/* Garantie */
.garantie .contenu{max-width:860px}
.garantie h2{margin-bottom:16px}
.garantie mark{color:var(--ink)}

/* Questions fréquentes */
.faq{max-width:860px}
.faq details{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r2);margin-bottom:8px}
.faq summary{cursor:pointer;padding:16px 48px 16px 20px;font-weight:600;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:24px;width:9px;height:9px;border-right:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(-135deg);top:28px}
.faq summary h3{display:inline;font:600 16px/26px var(--f-texte);letter-spacing:0}
.faq details p{margin:0;padding:0 20px 18px;color:var(--muted)}

/* Formulaire */
.formulaire{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r3);box-shadow:var(--ombre);padding:24px}
.formulaire h2{font-size:24px;line-height:30px;margin-bottom:4px}
.champs{display:grid;gap:14px;margin-top:16px}
@media(min-width:620px){.champs.deux-col{grid-template-columns:1fr 1fr}.champs .large{grid-column:1/-1}}
.champ label{display:block;font-weight:600;font-size:14px;line-height:20px;margin-bottom:4px}
.champ label span{font-weight:400;color:var(--muted)}
.champ input,.champ select,.champ textarea{width:100%;font:400 16px/24px var(--f-texte);color:var(--ink);background:var(--blanc);border:1px solid #8A93A6;border-radius:var(--r1);padding:10px 12px}
.champ textarea{min-height:96px;resize:vertical}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{outline:2px solid var(--signal);outline-offset:0;border-color:var(--signal)}
.champ [aria-invalid="true"]{border-color:var(--alerte);border-width:2px}
.champ .erreur{display:block;color:var(--alerte);font-size:14px;line-height:20px;margin-top:4px;font-weight:500}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.message-formulaire{margin:16px 0 0;padding:12px 14px;border-radius:var(--r1);font-weight:500}
.message-formulaire:empty{display:none}
.message-formulaire.erreur{background:#FBE8E6;color:var(--alerte)}
.formulaire .boutons{margin:20px 0 8px}
.formulaire .boutons .btn{flex:1 1 240px}

/* Page audit */
.page-audit .grille{display:grid;gap:32px;align-items:start;padding:32px 0 var(--section)}
.page-audit h1{margin-bottom:16px}
.liste-audit{list-style:none;display:grid;gap:10px;margin:0 0 24px}
.liste-audit li{padding-left:30px;position:relative}
.liste-audit li::before{content:"";position:absolute;left:4px;top:8px;width:14px;height:8px;border-left:2.5px solid var(--succes);border-bottom:2.5px solid var(--succes);transform:rotate(-45deg)}
.prix-audit{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r2);padding:16px 20px;margin-bottom:24px}
.prix-audit p{margin:0}
.page-audit picture img{border-radius:var(--r3);width:100%;aspect-ratio:16/9;object-fit:cover}
@media(min-width:960px){.page-audit .grille{grid-template-columns:1fr 1fr;gap:56px;padding-top:56px}.page-audit .colle{position:sticky;top:24px}}

/* Pages de texte (légales, merci, 404) */
.texte{max-width:760px;padding:40px 0 var(--section)}
.texte h1{margin-bottom:16px}
.texte h2{font-size:22px;line-height:28px;margin:32px 0 8px}
.texte ul{padding-left:22px;margin:0 0 16px}
.texte li{margin-bottom:6px}
.texte dl{margin:0 0 16px;display:grid;gap:4px 16px}
.texte dt{font-weight:600}
.texte dd{margin:0 0 8px}
@media(min-width:620px){.texte dl{grid-template-columns:240px 1fr}.texte dd{margin:0}}
.avertissement{background:#FFF7D1;border:1px solid #E6C200;border-radius:var(--r2);padding:12px 16px;margin-bottom:24px;font-weight:500}
.fil{font-size:14px;line-height:20px;color:var(--muted);margin-bottom:16px}
.fil a{color:var(--muted)}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.fil li+li::before{content:"›";margin-right:6px}
.centre{text-align:center;max-width:680px;margin:0 auto;padding:64px 0 var(--section)}
.centre h1{margin-bottom:16px}
.centre .boutons{justify-content:center}

/* Appel final */
.final{text-align:center}
.final h2{max-width:760px;margin:0 auto}
.final .boutons{justify-content:center;align-items:center}

/* Pied de page */
.pied{background:var(--ink);color:#C5CCDC;padding:48px 0 32px;font-size:15px;line-height:24px}
.pied a{color:#fff}
.pied .logo img{height:34px;width:auto;margin-bottom:12px}
.pied .grille{display:grid;gap:24px}
.pied ul{list-style:none;display:grid;gap:6px}
.pied .signature{color:#fff;font-weight:500;margin:0}
.pied .credits{border-top:1px solid #2C3A59;margin-top:32px;padding-top:16px;font-size:13px;line-height:20px;color:#A3ADC2}
.pied .credits p{margin:0 0 4px}
@media(min-width:800px){.pied .grille{grid-template-columns:1.4fr 1fr 1fr}}

/* Bandeau de consentement (affiché seulement si des balises publicitaires sont configurées) */
.consentement{position:fixed;left:16px;right:16px;bottom:16px;z-index:30;background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r2);box-shadow:0 12px 40px rgba(19,32,58,.25);padding:20px;max-width:560px;margin:0 auto}
.consentement h2{font-size:18px;line-height:24px;margin-bottom:6px}
.consentement p{font-size:14px;line-height:20px;margin:0 0 12px}
.consentement .boutons{margin:0;gap:8px}
.consentement .btn{flex:1 1 140px;padding:9px 12px;font-size:15px}
.consentement fieldset{border:0;padding:0;margin:0 0 12px;font-size:14px;line-height:20px}
.consentement label{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px}
[hidden]{display:none!important}

@media(min-width:900px){
  :root{--section:96px}
  body{font-size:17px;line-height:28px}
  h1{font-size:56px;line-height:60px}
  h2{font-size:40px;line-height:46px}
  .chapeau{font-size:20px;line-height:30px}
  .contenu{padding:0 16px}
  .formulaire{padding:32px}
  .carte,.etapes li{padding:28px}
}
@media print{.entete,.pied,.consentement,.boutons{display:none}body{background:#fff}}