/* outils.css - pages outils de Table & Comptoir.
   Consomme les tokens du :root de styles.css (palette lie-de-vin / creme / laiton).
   Aucune police ni couleur en dur : la DA reste pilotee par un seul endroit. */

.outil-page{padding:54px 0 100px;background:linear-gradient(180deg,var(--fill, #EBE3D6) 0,var(--bg, #F4EFE6) 420px)}
/* largeur : voir BLOC LARGEUR UNIFIEE dans styles.css */
.outil-header{margin-bottom:30px}
.outil-header h1{font-family:var(--serif, Fraunces,Georgia,serif);font-size:clamp(38px,5.2vw,62px);letter-spacing:-2px;line-height:1.05;margin:0}

/* Ouverture normee : reponse directe, essentiel, perimetre. */
.outil-reponse{font-size:20px;line-height:1.6;color:var(--ink, #241A16);margin:0 0 26px;
  border-left:3px solid var(--gold, #C08A3E);padding-left:20px}
.outil-essentiel{margin:0 0 26px;padding-left:20px}
.outil-essentiel li{margin:9px 0;font-size:16px;line-height:1.6;color:var(--muted, #7B6A60)}
.outil-essentiel li::marker{color:var(--gold, #C08A3E)}
.outil-perimetre{margin:0 0 48px;font-size:15px;line-height:1.6;color:var(--muted, #7B6A60)}

.outil-article h2{font-family:var(--serif, Fraunces,Georgia,serif);font-size:clamp(28px,3.4vw,40px);letter-spacing:-1.2px;
  line-height:1.12;margin:0 0 20px}
.outil-article h3{font-family:var(--serif, Fraunces,Georgia,serif);font-size:22px;letter-spacing:-.5px;margin:30px 0 10px}
.outil-article p{font-size:16px;line-height:1.7}
.outil-article section{margin-bottom:56px}

/* Formulaire - fonctionne sans JavaScript, le calcul est fait au serveur. */
.outil-form{background:var(--surface, #FDFAF4);border:1px solid var(--line, #D9CDBD);padding:30px}
.outil-form form{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 22px;align-items:end}
.outil-form .champ{display:flex;flex-direction:column;gap:7px}
.outil-form label{font-size:13px;font-weight:700}
.outil-form input,.outil-form select{font:400 15px/1.4 var(--sans, Inter,Arial,sans-serif);color:var(--ink, #241A16);
  background:var(--white, #FFFFFF);border:1px solid var(--line, #D9CDBD);padding:11px 12px;max-width:340px}
.outil-form input:focus,.outil-form select:focus{outline:2px solid var(--blue, #5C1A2B);outline-offset:1px}
.outil-form button{grid-column:1/-1;justify-self:start}

/* Resultat */
.outil-resultat{background:var(--ink, #241A16);color:var(--bg, #F4EFE6);padding:34px 38px}
.outil-resultat h2{color:var(--white, #FFFFFF)}
.resultat-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:22px}
.resultat-grille div{border-top:1px solid rgba(244,239,230,.22);padding-top:14px}
.resultat-grille strong{display:block;font:700 34px/1.05 var(--serif, Fraunces,Georgia,serif);color:var(--gold, #C08A3E);letter-spacing:-1px}
.resultat-grille span{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--text-faint, #C7B9AB)}
.resultat-note,.resultat-principe,.resultat-type{font-size:14px;line-height:1.6;color:var(--text-faint, #C7B9AB);margin:12px 0 0}
.resultat-type{color:var(--bg, #F4EFE6);font-size:16px;font-weight:700}
.resultat-alerte{margin-top:16px;padding:13px 15px;font-size:14px;line-height:1.55;
  background:var(--callout-bg, #FBF3E3);color:var(--callout-text, #6E4A17);border-left:3px solid var(--callout-border, #E3CDA0)}

/* Pistes (accords, cadeaux) */
.pistes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.piste{background:var(--surface, #FDFAF4);color:var(--ink, #241A16);border:1px solid var(--line, #D9CDBD);padding:20px}
.piste-cible{border-color:var(--gold, #C08A3E);border-width:2px}
.piste-num{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--gold, #C08A3E)}
.piste h3{font-size:19px;margin:9px 0 8px}
.piste p{font-size:14px;line-height:1.55;color:var(--muted, #7B6A60);margin:0 0 8px}
.piste-budget{font-weight:700;color:var(--ink, #241A16) !important}
.piste-limite{font-size:13px !important;border-top:1px solid var(--line, #D9CDBD);padding-top:8px;margin-top:10px !important}

/* Mention sanitaire - obligatoire, jamais decorative. */
.outil-sanitaire{background:var(--callout-bg, #FBF3E3);border:1px solid var(--callout-border, #E3CDA0);
  color:var(--callout-text, #6E4A17);padding:22px 24px}
.outil-sanitaire p{font-size:14px;line-height:1.6;margin:0 0 9px}
.outil-sanitaire p:last-child{margin:0}
.outil-sanitaire a{color:var(--callout-text, #6E4A17);text-decoration:underline}

/* Tableaux : colonne de texte etroite, tableaux larges a defilement horizontal. */
.tableau-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.outil-article table{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
.outil-article caption{text-align:left;font-size:13px;color:var(--muted, #7B6A60);padding-bottom:10px}
.outil-article th,.outil-article td{border-bottom:1px solid var(--line, #D9CDBD);padding:11px 12px;
  text-align:left;vertical-align:top;line-height:1.5}
.outil-article thead th{border-bottom:2px solid var(--ink, #241A16);font-size:13px}
.outil-article tbody strong{color:var(--blue, #5C1A2B)}

/* Methode, sources, FAQ, divulgation */
.outil-methode{background:var(--surface, #FDFAF4);border-left:3px solid var(--gold, #C08A3E);padding:22px 24px}
.outil-methode h2{font-size:22px;margin-bottom:12px}
.outil-methode p{font-size:14px;line-height:1.65;color:var(--muted, #7B6A60);margin:0}
.outil-sources ul{padding-left:20px;margin:0}
.outil-sources li{font-size:14px;line-height:1.6;color:var(--muted, #7B6A60);margin:8px 0}
.outil-sources a{color:var(--blue, #5C1A2B)}
.outil-faq details{border-bottom:1px solid var(--line, #D9CDBD);padding:16px 0}
.outil-faq summary{cursor:pointer;font-weight:700;font-size:16px}
.outil-faq details p{margin:11px 0 0;color:var(--muted, #7B6A60)}
.outil-divulgation{font-size:13px;line-height:1.6;color:var(--muted, #7B6A60);border:1px dashed var(--line, #D9CDBD);padding:14px 16px}
.outil-divulgation code{font-size:12px}
.outil-suite{background:var(--callout-bg, #FBF3E3);padding:28px 30px}
.outil-suite p{margin:0;color:var(--ink, #241A16)}
.outil-suite a,.outil-explication a{color:var(--blue, #5C1A2B);font-weight:600}

@media(max-width:800px){
  .outil-page{padding:34px 0 70px}
  .outil-form form{grid-template-columns:1fr}
  .outil-form input,.outil-form select{max-width:none}
  .resultat-grille{grid-template-columns:repeat(2,1fr)}
  .pistes{grid-template-columns:1fr}
  .outil-resultat{padding:26px 20px}
  .outil-reponse{font-size:17px}
}
@media(max-width:520px){
  .resultat-grille{grid-template-columns:1fr}
  .outil-methode,.outil-sanitaire,.outil-suite{padding:18px 16px}
}

/* Ancre de resultat. Le header du front est sticky (82 px, 68 px sous 800 px) :
   sans marge de defilement, le resultat arrive masque dessous. */
#resultat{display:block;height:0;scroll-margin-top:104px}
@media(max-width:800px){#resultat{scroll-margin-top:88px}}
/* styles.css pose html{scroll-behavior:smooth} : sur le chargement qui suit une
   soumission, la page peindrait en haut puis descendrait en animation - ce qui se
   lit exactement comme le defaut que l ancre corrige. */
html:has(#resultat[autofocus]){scroll-behavior:auto}

/* Fil d Ariane des pages outils. guide.css ne style que .breadcrumbs :
   on reprend ici les memes regles pour la classe attendue. */
.breadcrumb{display:flex;flex-wrap:wrap;gap:9px;color:var(--muted, #7B6A60);font-size:12px;margin-bottom:34px}
.breadcrumb a{color:var(--blue, #5C1A2B);text-decoration:none}
.breadcrumb a:hover,.breadcrumb a:focus{text-decoration:underline}

/* ===== PAGES PILIER ===== */
.pilier-header{margin-bottom:30px}
.pilier-header h1{font-family:var(--serif, Fraunces,Georgia,serif);font-size:clamp(36px,5vw,60px);letter-spacing:-2px;line-height:1.06;margin:0}
.pilier-sommaire{background:var(--surface, #FDFAF4);border:1px solid var(--line, #D9CDBD);padding:24px 28px}
.pilier-sommaire h2{font-size:20px;margin-bottom:12px}
.pilier-sommaire ol{margin:0;padding-left:20px}
.pilier-sommaire li{margin:7px 0;font-size:15px}
.pilier-sommaire a{color:var(--blue, #5C1A2B);font-weight:600;text-decoration:none}
.pilier-sommaire a:hover,.pilier-sommaire a:focus{text-decoration:underline}
.pilier-section{scroll-margin-top:104px}
.pilier-section p{margin:0 0 16px}
.pilier-section a{color:var(--blue, #5C1A2B);font-weight:600}
.pilier-outil{background:var(--ink, #241A16);color:var(--bg, #F4EFE6);padding:30px 34px}
.pilier-outil h2{color:var(--white, #FFFFFF)}

.pilier-outil .button-primary{background:var(--gold, #C08A3E);color:var(--ink, #241A16);box-shadow:none}
.pilier-outil .button-primary:hover{background:var(--secondary-hover, #A9762F)}
.pilier-suite{background:var(--callout-bg, #FBF3E3);padding:28px 30px}
.pilier-suite .outil-essentiel li{color:var(--ink, #241A16)}
@media(max-width:800px){.pilier-section{scroll-margin-top:88px}.pilier-outil{padding:22px 20px}}

.pilier-citation{margin:24px 0;padding:20px 24px;background:var(--callout-bg, #FBF3E3);border-left:3px solid var(--gold, #C08A3E)}
.pilier-citation p{margin:0;font-family:var(--serif, Fraunces,Georgia,serif);font-size:19px;line-height:1.5;color:var(--ink, #241A16)}

/* ===== FIGURES DES DOSSIERS ===== */
/* Legende obligatoire : la charte du site ne publie pas dimage decorative. */
.pilier-hero,.pilier-illu{margin:0 0 34px}
.pilier-illu{margin:26px 0 30px}
.pilier-hero img,.pilier-illu img{display:block;width:100%;height:auto}
.pilier-hero figcaption,.pilier-illu figcaption{margin-top:10px;padding-left:14px;border-left:2px solid var(--gold, #C08A3E);font-size:13.5px;line-height:1.55;color:var(--muted, #7B6A60)}
@media(max-width:800px){.pilier-hero,.pilier-illu{margin-bottom:24px}}