/* Feuille de style du site frank-grandjean.fr.
   PREMIERE PARTIE : la feuille de la page "Modele de referencement du labo"
   (Y:\WEB\Labo\labo-modele.html, etat du 17/09/2026), reprise telle quelle.
   SECONDE PARTIE (en bas) : ce que le site ajoute. */

:root{
  --bg:#F5F6F3; --panel:#FFFFFF; --panel-2:#EDF0EC;
  --ink:#1A222C; --ink-soft:#3E4A56; --faint:#6E7A86;
  --line:#D3D9D6; --line-soft:#E4E8E5;
  --accent:#0E6B86; --accent-ink:#0A5068; --accent-bg:#DDEEF3;
  --measure:#9A6A12; --measure-bg:#F6EBD3;
  --ok:#2E7D4F; --ok-bg:#DDEFE3;
  --warn:#A3412B; --warn-bg:#F7E1DA;
  --shadow:0 1px 2px rgba(26,34,44,.06),0 6px 18px rgba(26,34,44,.06);
  --display:"Bricolage Grotesque","Trebuchet MS",Arial,sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",Verdana,sans-serif;
  --mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#131920; --panel:#1B232C; --panel-2:#222C36;
    --ink:#E8ECEF; --ink-soft:#B9C2CB; --faint:#8A96A2;
    --line:#33404C; --line-soft:#2A353F;
    --accent:#5FB9D4; --accent-ink:#8FD0E4; --accent-bg:#173441;
    --measure:#E0B45C; --measure-bg:#3A2E14;
    --ok:#7CC79A; --ok-bg:#1E3A2A;
    --warn:#F0997F; --warn-bg:#472319;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#131920; --panel:#1B232C; --panel-2:#222C36;
  --ink:#E8ECEF; --ink-soft:#B9C2CB; --faint:#8A96A2;
  --line:#33404C; --line-soft:#2A353F;
  --accent:#5FB9D4; --accent-ink:#8FD0E4; --accent-bg:#173441;
  --measure:#E0B45C; --measure-bg:#3A2E14;
  --ok:#7CC79A; --ok-bg:#1E3A2A;
  --warn:#F0997F; --warn-bg:#472319;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
.wrap{max-width:1080px;margin:0 auto;padding-block:32px 72px;padding-inline:20px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(30px,5vw,50px);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(22px,3vw,30px);font-weight:700;margin-top:56px;padding-top:22px;border-top:2px solid var(--ink)}
h3{font-size:19px;font-weight:700;margin-top:26px}
h4{font-size:16px;font-weight:700}
p{margin:10px 0;max-width:70ch}
a{color:var(--accent-ink)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.lead{font-size:18px;color:var(--ink-soft);max-width:66ch}
.hero{display:grid;gap:22px}
.hero .meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--mono);font-size:12.5px;color:var(--faint)}
.hero .meta b{color:var(--ink-soft);font-weight:600}

/* lexique inline */
.def{border-bottom:1px dotted var(--faint);cursor:help}

/* la chaine du modele */
.chain{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px;counter-reset:etape}
.chain a{display:block;text-decoration:none;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 14px 12px;box-shadow:var(--shadow);position:relative;min-height:120px}
.chain a:hover,.chain a:focus-visible{border-color:var(--accent);outline:none}
.chain a::before{counter-increment:etape;content:counter(etape);font-family:var(--display);font-weight:800;font-size:26px;color:var(--accent);line-height:1}
.chain a .t{display:block;font-family:var(--display);font-weight:700;font-size:16px;margin-top:6px}
.chain a .s{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:4px;line-height:1.45}
.chain a .tag{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:12px;background:var(--panel-2);color:var(--faint)}
.chain a.mesure .tag{background:var(--measure-bg);color:var(--measure)}
.loop{margin-top:12px;font-size:14px;color:var(--faint);font-family:var(--mono)}
@media (max-width:820px){.chain{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.chain{grid-template-columns:1fr}.chain a{min-height:0}}

/* etape */
.etape{margin-top:8px}
.etape .head{display:flex;gap:14px;align-items:baseline}
.etape .num{font-family:var(--display);font-weight:800;font-size:44px;color:var(--accent);line-height:1}
.etape .question{font-family:var(--display);font-size:17px;color:var(--ink-soft);margin-top:6px}
.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;margin-top:18px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
.regles{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.regles h4{color:var(--accent-ink)}
.regles ul{margin:8px 0 0;padding-left:18px}
.regles li{margin:7px 0}
.regles li b{font-weight:700}
.preuve{display:inline-block;font-family:var(--mono);font-size:11.5px;color:var(--measure);background:var(--measure-bg);border-radius:12px;padding:1px 8px;margin-left:4px;white-space:nowrap}
.outils{display:grid;gap:10px}
.outil{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px}
.outil .n{font-family:var(--display);font-weight:700;font-size:15.5px}
.outil .n .k{font-family:var(--mono);font-weight:600;font-size:12.5px;color:var(--accent-ink);margin-left:6px}
.outil p{font-size:14.5px;margin:5px 0 0;color:var(--ink-soft)}
.outil .ou{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:6px;overflow-wrap:anywhere}
.exemple{margin-top:16px;border-left:3px solid var(--accent);background:var(--accent-bg);padding:12px 16px;border-radius:0 10px 10px 0;font-size:15px}
.exemple b{color:var(--accent-ink)}
.exemple .q{font-family:var(--mono);font-size:13px}

/* terrains */
.labos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
@media (max-width:820px){.labos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.labos{grid-template-columns:1fr}}
.labo{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;box-shadow:var(--shadow)}
.labo .eyebrow{margin-bottom:4px}
.labo .n{font-family:var(--display);font-weight:700;font-size:16px}
.labo p{font-size:14px;color:var(--ink-soft);margin:6px 0 0}
.labo .v{font-family:var(--mono);font-size:12px;color:var(--measure);margin-top:8px}

/* tableau inventaire */
.tablewrap{overflow-x:auto;margin-top:18px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:14px}
th{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:left;padding:12px 12px;border-bottom:2px solid var(--line);background:var(--panel-2)}
td{padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tr:last-child td{border-bottom:0}
td.o{font-family:var(--display);font-weight:700;font-size:14.5px;min-width:180px}
td.e{white-space:nowrap}
td.l{font-family:var(--mono);font-size:11.5px;color:var(--faint);overflow-wrap:anywhere;min-width:180px}
.st{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:12px;white-space:nowrap}
.st.ok{background:var(--ok-bg);color:var(--ok)}
.st.wip{background:var(--measure-bg);color:var(--measure)}
.st.todo{background:var(--warn-bg);color:var(--warn)}
.st.proto{background:var(--accent-bg);color:var(--accent-ink)}
.et{display:inline-block;font-family:var(--mono);font-size:11px;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:10px;padding:1px 7px;color:var(--ink-soft);white-space:nowrap}

/* lois */
.lois{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
@media (max-width:700px){.lois{grid-template-columns:1fr}}
.loi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.loi b{font-family:var(--display);font-size:15.5px;display:block;margin-bottom:4px}
.loi p{font-size:14.5px;margin:0;color:var(--ink-soft)}

/* glossaire */
dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin-top:18px;font-size:14.5px}
@media (max-width:560px){dl{grid-template-columns:1fr;gap:2px 0}dd{margin:0 0 10px}}
dt{font-family:var(--mono);font-weight:600;color:var(--accent-ink)}
dd{margin:0;color:var(--ink-soft)}
.note{margin-top:18px;padding:12px 16px;border:1px solid var(--line);border-left:3px solid var(--measure);border-radius:0 10px 10px 0;background:var(--panel);font-size:14.5px;max-width:78ch}
footer{margin-top:60px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--faint);line-height:1.7}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.chain a{transition:border-color .15s}}

/* ==========================================================================
   SECONDE PARTIE - AJOUTS DU SITE frank-grandjean.fr (20/09/2026)
   Habille ce que le site ajoute a la page d'origine : barre de navigation,
   page bio (portrait, bloc reponse, parcours), boutons, pied de page.
   Memes jetons de couleur que la premiere partie : clair et sombre suivent.
   ========================================================================== */

/* texte pose sur la couleur d'accent (boutons pleins) */
:root{--on-accent:#FFFFFF}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--on-accent:#0B1A20}
}
:root[data-theme="dark"]{--on-accent:#0B1A20}

/* DEUX COULEURS DU THEME CLAIR RECTIFIEES (20/09/2026, contrastes calcules).
   Elles viennent de la premiere partie de cette feuille et n'atteignaient pas
   le rapport de 4,5 pour 1 exige pour du texte courant :
     --ok    #2E7D4F sur son fond vert clair : 4,21  ->  #276841 : 5,58
     --faint #6E7A86 sur blanc               : 4,38  ->  #616C77 : 5,36
   Corrige ici et non plus haut : la premiere partie est regeneree depuis la
   page du labo par build_methode_frank_grandjean.py, une retouche y serait
   perdue. Cette declaration vient apres, elle l'emporte. Elle profite aussi
   aux etiquettes de statut et aux lignes grises de la page methode.
   Le theme sombre passait deja : on n'y touche pas. */
:root{--ok:#276841;--faint:#616C77}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--ok:#7CC79A;--faint:#8A96A2}
}
:root[data-theme="dark"]{--ok:#7CC79A;--faint:#8A96A2}

/* lien d'evitement clavier */
.skip{position:absolute;left:-9999px;top:0;z-index:10;background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:0 0 8px 0;font-family:var(--mono);font-size:13px}
.skip:focus{left:0}

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

/* retour en haut de page : pastille flottante, presente sur toutes les pages.
   Taille 48 px : la cible tactile recommandee. Le decalage du bas suit
   safe-area-inset pour ne pas tomber sous la barre du navigateur mobile. */
.haut{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent-ink);box-shadow:0 2px 6px rgba(26,34,44,.18),0 10px 24px rgba(26,34,44,.18);text-decoration:none}
.haut[hidden]{display:none}
.haut:hover{background:var(--accent-ink)}
.haut:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
/* la fleche : deux traits assembles, pour ne dependre d'aucune police d'icones */
.haut-fleche{width:11px;height:11px;margin-top:3px;border-left:2.5px solid currentColor;border-top:2.5px solid currentColor;transform:rotate(45deg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .haut{box-shadow:0 2px 6px rgba(0,0,0,.5),0 10px 24px rgba(0,0,0,.4)}}
:root[data-theme="dark"] .haut{box-shadow:0 2px 6px rgba(0,0,0,.5),0 10px 24px rgba(0,0,0,.4)}
@media (max-width:460px){.haut{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}}

/* barre du site */
.site-bar{background:var(--panel);border-bottom:1px solid var(--line)}
.site-bar .in{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline;justify-content:space-between}
.brand{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand span{color:var(--accent)}
.site-nav{display:flex;flex-wrap:wrap;gap:4px 22px;font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase}
.site-nav a{color:var(--ink-soft);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--accent-ink);border-bottom-color:var(--line)}
.site-nav a[aria-current="page"]{color:var(--accent-ink);border-bottom-color:var(--accent)}

/* en-tete de la bio : texte a gauche, portrait a droite */
.hero.bio{grid-template-columns:minmax(0,1fr) 230px;align-items:center;gap:28px 40px}
.hero.bio .copy{display:grid;gap:18px}
.portrait img{display:block;width:230px;height:230px;border-radius:50%;object-fit:cover;border:5px solid var(--panel);box-shadow:var(--shadow)}
@media (max-width:760px){
  .hero.bio{grid-template-columns:1fr}
  .portrait{order:-1}
  .portrait img{width:150px;height:150px}
}

/* boutons */
.cta{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;padding:11px 18px;border-radius:10px;border:1px solid var(--accent);color:var(--accent-ink);background:transparent}
.btn:hover{background:var(--accent-bg)}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}

/* sous-titre sous le h1 (page consultant) : meme famille que le titre, plus
   petit et en couleur d'accent, pour qu'il se lise comme un second titre et
   non comme le debut du texte */
.soustitre{font-family:var(--display);font-weight:700;font-size:clamp(18px,2.4vw,24px);color:var(--accent-ink);margin:-6px 0 0;line-height:1.2}

/* bloc reponse sous le titre : le passage autoportant de la page */
.reponse{margin-top:30px;border-left:3px solid var(--accent);background:var(--accent-bg);padding:16px 20px;border-radius:0 10px 10px 0;max-width:80ch}
.reponse .qr{display:block;font-family:var(--display);font-weight:700;font-size:18px;color:var(--accent-ink);margin-bottom:6px}

/* parcours */
.parcours{display:grid;gap:12px;margin-top:18px}
.poste{display:grid;grid-template-columns:170px minmax(0,1fr);gap:4px 22px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:var(--shadow)}
.poste .when{font-family:var(--mono);font-size:12.5px;color:var(--faint);padding-top:3px}
.poste .t{font-family:var(--display);font-weight:700;font-size:16.5px;line-height:1.2}
.poste .org{font-family:var(--mono);font-size:12.5px;color:var(--measure);margin-top:3px}
.poste p{font-size:14.5px;color:var(--ink-soft);margin:7px 0 0;max-width:72ch}
@media (max-width:620px){.poste{grid-template-columns:1fr}}

/* lien de fin de section */
.suite{margin-top:18px;font-family:var(--display);font-weight:700}

/* cartes des rubriques (accueil) : le titre de la carte est un lien */
.loi b a{color:var(--ink);text-decoration:none}
.loi b a:hover{color:var(--accent-ink);text-decoration:underline}

/* synthese d'un test (page experimentations) */
.test{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px 16px;box-shadow:var(--shadow);margin-top:18px}
.test h3{margin-top:0;font-size:20px}
.test .fiche{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--faint)}
.test dl{grid-template-columns:190px minmax(0,1fr);margin-top:14px}
.test dd{max-width:72ch}
.test .suite{margin-top:14px;font-size:15px}
@media (max-width:560px){.test dl{grid-template-columns:1fr}}

/* listes de publications */
.pubs{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.pubs li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:2px 16px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 14px}
.pubs .d{font-family:var(--mono);font-size:12.5px;color:var(--faint);padding-top:3px}
.pubs a{font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.3;text-decoration:none;color:var(--ink)}
.pubs a:hover{color:var(--accent-ink);text-decoration:underline}
.pubs .p{display:block;font-size:14px;color:var(--ink-soft);margin-top:3px}
@media (max-width:560px){.pubs li{grid-template-columns:1fr}}

/* texte courant des pages d'information (mentions legales) */
.prose p{max-width:74ch}

/* =========================================================================
   GABARIT DES PAGES FILLES (20/09/2026)
   Meme ossature que les pages metier du site lyonnais : l'offre d'abord, la
   preuve ensuite, et un plan de page en colonne de droite qui suit le
   defilement. Ici avec la charte du site personnel.
   ========================================================================= */

/* corps a gauche, plan a droite ; le plan repasse en tete sur petit ecran */
.fille{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:40px;margin-top:28px;align-items:start}
/* min-width:0 est indispensable : dans une grille, un enfant ne peut pas etre
   plus etroit que son contenu, et le tableau des tarifs elargissait alors
   toute la page (780 px mesures sur un ecran de 505). */
.fille>*{min-width:0}
.fille-corps>section{margin-bottom:60px}
.fille-corps>section:last-child{margin-bottom:0}
.fille-plan{position:sticky;top:20px}
@media (max-width:900px){
  .fille{grid-template-columns:1fr;gap:26px}
  .fille-plan{position:static;order:-1}
}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.plan h2{font-size:15.5px;margin:0 0 10px;border-top:0;padding-top:0}
.plan ol{margin:0;padding-left:20px;font-size:14px;line-height:1.45}
.plan li{margin:7px 0}
.plan a{color:var(--ink-soft);text-decoration:none}
.plan a:hover{color:var(--accent-ink);text-decoration:underline}

/* encart du test a faire soi-meme */
.autotest{background:var(--measure-bg);border:1px solid var(--measure);border-radius:12px;padding:18px 20px}
.autotest h2{margin-top:0;border-top:0;padding-top:0;color:var(--measure)}
.autotest ol{max-width:74ch}
.autotest li{margin:7px 0}
.autotest .verdict{margin-top:14px;padding:12px 14px;background:var(--panel);border-radius:8px;font-size:14.5px}

/* les cartes de l'offre */
.offre{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
@media (max-width:640px){.offre{grid-template-columns:1fr}}
.offre .o{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:var(--shadow)}
.offre .o b{font-family:var(--display);font-size:15.5px;display:block;margin-bottom:5px}
.offre .o p{font-size:14.5px;color:var(--ink-soft);margin:0}

/* tableau des tarifs. Le conteneur defile horizontalement sur petit ecran :
   sans lui, les trois colonnes imposent leur largeur a toute la page. */
.tarifs-wrap{overflow-x:auto;margin-top:16px}
.tarifs{width:100%;min-width:480px;border-collapse:collapse;font-size:14.5px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tarifs th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:left;padding:10px 12px;border-bottom:2px solid var(--line);background:var(--panel-2)}
.tarifs td{padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tarifs tr:last-child td{border-bottom:0}
.tarifs .prix{font-family:var(--display);font-weight:700;white-space:nowrap;color:var(--accent-ink)}
.tarifs caption{caption-side:bottom;text-align:left;font-size:12.5px;color:var(--faint);padding:10px 12px;font-family:var(--mono);line-height:1.5}

/* l'echange avec une IA */
.echange{display:grid;gap:10px;margin-top:16px}
.tour{border-radius:12px;padding:13px 16px;font-size:14.5px;max-width:none}
.tour b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px;font-weight:600}
.tour.client{background:var(--accent-bg);border:1px solid var(--accent);margin-right:12%}
.tour.client b{color:var(--accent-ink)}
.tour.ia{background:var(--panel);border:1px solid var(--line);margin-left:12%}
.tour.ia b{color:var(--faint)}
.tour ul{margin:6px 0 0;padding-left:18px}
.tour li{margin:4px 0}

/* source sous un chiffre : la reserve se lit avec le chiffre, jamais en note */
.source{display:block;font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:6px;line-height:1.5}

/* ---------------------------------------------------------------- CONTACT
   Disposition demandee : le texte a gauche, le formulaire a droite. Sous
   860 px les deux colonnes s'empilent et le texte passe au-dessus, pour que
   le visiteur sache de quoi il s'agit avant de voir les champs. */
.contact-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;margin-top:30px;align-items:start}
.contact-grid>*{min-width:0}
.contact-texte h2,.contact-form h2{margin-top:0;border-top:0;padding-top:0;font-size:clamp(20px,2.4vw,25px)}
.contact-texte .lois{margin-top:20px}
.contact-texte .note{margin-top:22px}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:30px}}

/* le formulaire, dans son panneau */
.contact-form{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px 24px 18px;box-shadow:var(--shadow);position:sticky;top:20px}
@media (max-width:860px){.contact-form{position:static}}
.contact-form form{margin-top:16px}
.contact-form p{margin:0 0 14px;max-width:none}
.contact-form label{display:block;font-family:var(--display);font-weight:700;font-size:14.5px;margin-bottom:5px}
/* Le contour d'un champ est le seul indice de sa presence : il lui faut
   3 pour 1 contre le panneau. La bordure ordinaire du site (--line) ne donnait
   que 1,43 pour 1 en theme clair et 1,50 en sombre, d'ou cette variable
   dediee, qui n'eclaircit pas les autres bordures de la page. */
:root{--champ-bord:#6A7580}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--champ-bord:#7C8B99}}
:root[data-theme="dark"]{--champ-bord:#7C8B99}
.field{display:block;width:100%;font-family:var(--body);font-size:15.5px;line-height:1.45;color:var(--ink);background:var(--bg);border:1px solid var(--champ-bord);border-radius:8px;padding:10px 12px}
.field:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea.field{resize:vertical;min-height:120px}
/* la fleche du menu deroulant, dessinee pour rester lisible en theme sombre */
select.field{appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
/* En contraste force (reglage d'accessibilite de Windows), le systeme efface
   les images de fond : la fleche dessinee ci-dessus disparait et le menu
   deroulant ressemble a un champ de saisie. On rend la main au navigateur, qui
   dessine alors sa propre fleche. */
@media (forced-colors:active){select.field{appearance:auto;background-image:none;padding-right:12px}}
.contact-form .btn{width:100%;text-align:center;padding:13px 18px;font-size:16px;cursor:pointer;border-width:1px;border-style:solid}
.note-form{font-size:13px;color:var(--faint);line-height:1.5}

/* reponse apres envoi */
.msg{border-left:3px solid var(--ok);background:var(--ok-bg);color:var(--ok);border-radius:0 8px 8px 0;padding:12px 14px;font-size:14.5px;font-weight:700}
.msg.err{border-left-color:var(--warn);background:var(--warn-bg);color:var(--warn)}

/* champ-piege : invisible a l'ecran ET aux lecteurs d'ecran, mais present
   dans la page, donc rempli par les robots qui remplissent tout.
   Ni display:none ni type=hidden : les robots savent les eviter. */
.piege{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* CORRECTIF MOBILE de la page methode (20/09/2026). Dans la premiere partie,
   une etiquette de preuve ne passe jamais a la ligne (white-space:nowrap). La
   plus longue ("labo n°03 : meilleure position moyenne du site, 3,2") est plus
   large qu'un ecran de telephone : elle elargissait toute la colonne de
   l'etape 3 et la page debordait a 375 px (448 px mesures). On laisse donc les
   etiquettes se couper sur petit ecran, et on interdit a une colonne de grille
   de s'elargir au-dela de sa place. Le defaut existe aussi dans la page
   d'origine du labo (labo-modele.html). */
.grid2>*{min-width:0}
@media (max-width:760px){.preuve{white-space:normal}}

/* note de fin de la page methode (le <footer> de la page d'origine) */
.colophon{margin-top:60px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--faint);line-height:1.7;max-width:none}

/* pied du site : annule les marges du "footer" de la premiere partie */
footer.site-foot{margin-top:0;padding:0;border-top:1px solid var(--line);background:var(--panel)}
footer.site-foot .in{max-width:1080px;margin:0 auto;padding:22px 20px 34px;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}
footer.site-foot a{color:var(--ink-soft)}

/* Tableau a deux colonnes (page consultant, "Comment evaluer les progres ?",
   21/09/2026). La classe .tarifs impose min-width:480px, utile pour les trois
   colonnes des anciens tableaux de prix : sur un ecran de 375 px, un tableau
   de deux colonnes se mettait donc a defiler horizontalement alors qu'il tient
   parfaitement. .deux annule ce plancher. */
.tarifs.deux{min-width:0}