/* Formation IA Pontarlier : le calibre « entre / n'entre pas ». Toutes les valeurs viennent de tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-neige);color:var(--color-nuit);font-family:var(--font-body);font-size:var(--size-body);line-height:var(--lh-body)}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--font-title);font-weight:700;margin:0}
h1{font-size:var(--size-h1);line-height:var(--lh-h1)}
h2{font-size:var(--size-h2);line-height:var(--lh-h2);max-width:24ch}
h3{font-size:var(--size-h3);font-weight:600;line-height:var(--lh-h3)}
p{margin:0 0 var(--space-3)}
ul,ol{margin:0;padding:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--color-nuit);outline-offset:3px}
.sur-nuit :focus-visible,.entete :focus-visible{outline-color:var(--color-neige)}
.entete :focus-visible{outline-color:var(--color-nuit)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.saut{position:absolute;left:var(--gutter);top:-4rem;background:var(--color-laiton);color:var(--color-nuit);padding:var(--space-2) var(--space-3);font-family:var(--font-title);font-weight:700;z-index:10}
.saut:focus{top:var(--space-1)}
.in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.petit{font-size:var(--size-small)}
.douce{color:var(--color-encre-douce)}
.sur-nuit .douce,.sur-nuit .petit{color:var(--color-texte-nuit)}

/* ---------- Bouton (laiton plein, texte nuit) ---------- */
.btn{display:inline-block;background:var(--color-laiton);color:var(--color-nuit);font-family:var(--font-title);font-weight:700;font-size:1.25rem;line-height:1;padding:15px 26px;border-radius:var(--radius);text-decoration:none;border:1.5px solid var(--color-nuit)}
.btn:hover{background:var(--color-neige);text-decoration:none}
.sur-nuit .btn{border-color:var(--color-laiton)}
.sur-nuit .btn:hover{border-color:var(--color-neige)}

/* ---------- Règle graduée (SVG pattern) et cote ---------- */
.regle{width:100%;height:14px;overflow:visible}
.cote{display:flex;align-items:center;margin:0;font-family:var(--font-title);font-weight:700;font-size:var(--size-plaque);letter-spacing:var(--ls-gravure);line-height:1;text-transform:uppercase;max-width:100%}
.cote::before,.cote::after{content:"";flex:none;width:var(--filet-w);height:12px;background:currentColor}
.cote i{flex:1 1 0;min-width:var(--space-2);height:var(--filet-w);background:currentColor}
.cote span{flex:none;padding:0 var(--space-2);white-space:nowrap}
.cote--sm{font-size:var(--size-small);letter-spacing:.04em}
.cote--douce{color:var(--color-encre-douce)}
.cote--laiton{color:var(--color-laiton)}
.cote--nuit{color:var(--color-texte-nuit)}
.cote--fin{max-width:24rem}
html.tm-js .cote{transition:clip-path var(--dur-cote) var(--tm-ease)}
html.tm-js .cote:not(.is-in){clip-path:inset(0 100% 0 0)}
html.tm-js .cote.is-in{clip-path:inset(0)}

/* ---------- Barre de laiton débitée ---------- */
.barre-zone{width:100%}
.barre{position:relative;height:var(--barre-h);width:var(--l,100%);background:var(--color-nuit);transform-origin:left center;
  clip-path:polygon(0 0,calc(100% - var(--chanfrein)) 0,100% var(--chanfrein),100% calc(100% - var(--chanfrein)),calc(100% - var(--chanfrein)) 100%,0 100%)}
.barre::before{content:"";position:absolute;inset:1.5px;background:var(--color-laiton);
  clip-path:polygon(0 0,calc(100% - var(--chanfrein) + 1px) 0,100% calc(var(--chanfrein) - 1px),100% calc(100% - var(--chanfrein) + 1px),calc(100% - var(--chanfrein) + 1px) 100%,0 100%)}
.barre::after{content:"";position:absolute;top:1.5px;bottom:1.5px;right:34px;width:12px;border-left:2px solid var(--color-rainure);border-right:2px solid var(--color-rainure)}
.l-25{--l:25%}.l-50{--l:50%}.l-100{--l:100%}
html.tm-js .barre{transition:transform var(--dur-barre) var(--tm-ease)}
html.tm-js .barre-zone:not(.is-in) .barre{transform:scaleX(0)}
.barre-zone .regle{margin-top:var(--space-1)}

/* ---------- Plaquette gravée ---------- */
.plaquette{display:inline-block;position:relative;background:var(--color-acier);color:var(--color-nuit);border-radius:var(--radius);padding:12px 24px;
  font-family:var(--font-title);font-weight:700;font-size:var(--size-plaque);line-height:1;letter-spacing:var(--ls-gravure);text-transform:uppercase;
  text-shadow:0 1px 0 var(--color-neige);outline:1px solid var(--color-filet);outline-offset:-6px;margin:0}
.plaquette--entre{background:var(--color-laiton);text-shadow:none;outline-color:var(--color-rainure)}
.plaquette--non::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:2px;background:var(--color-nuit);transform:rotate(-8deg)}

/* ---------- En-tête ---------- */
.entete{background:var(--color-neige);border-bottom:var(--filet-w) solid var(--color-filet)}
.entete .in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-top:var(--space-2);padding-bottom:var(--space-2)}
.marque{font-family:var(--font-title);font-weight:700;font-size:1.5rem;line-height:1;text-decoration:none}
.entete nav{display:none}
.entete nav ul{display:flex;gap:var(--space-4);list-style:none;font-size:var(--size-small)}
.entete .btn{display:none;font-size:1rem;padding:10px 16px}
@media (min-width:1080px){.entete nav{display:block}.entete .btn{display:inline-block}}

/* ---------- Sections ---------- */
.sec{padding:var(--space-6) 0}
.sec--acier{background:var(--color-acier)}
.sec--nuit{background:var(--color-nuit);color:var(--color-neige)}
.sec--nuit h2,.sec--nuit h3{color:var(--color-neige)}
.scinde{display:grid;gap:var(--space-4);align-items:start}
.scinde img{width:100%;height:auto;border-radius:var(--radius)}
.scinde p{max-width:60ch}
@media (min-width:900px){.scinde{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-5)}}

/* ---------- Hero ---------- */
.hero{background:var(--color-nuit);color:var(--color-neige);display:grid}
.hero-txt{padding:var(--space-5) var(--gutter) var(--space-5)}
.hero h1{max-width:16ch;margin-bottom:var(--space-4)}
.hero .chapo{font-size:var(--size-lead);color:var(--color-texte-nuit);max-width:46ch}
.hero .cote{margin-top:var(--space-4);max-width:21rem}
.hero-photo{position:relative;aspect-ratio:4/3;border-top:1.5px solid var(--color-laiton)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .hero-txt{padding:var(--space-6) var(--space-5) var(--space-6) max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)))}
  .hero-photo{aspect-ratio:auto;min-height:36rem;border-top:0;border-left:1.5px solid var(--color-laiton)}
}

/* ---------- Formations ---------- */
.formation{display:grid;gap:var(--space-3);padding:var(--space-5) 0;border-top:var(--filet-w) solid var(--color-filet)}
.prix-v{font-family:var(--font-title);font-weight:700;font-size:var(--size-display);line-height:var(--lh-display);font-variant-numeric:tabular-nums;margin:0}
.prix-n{font-size:var(--size-small);color:var(--color-encre-douce);margin:var(--space-1) 0 0;line-height:1.4}
.formation .barre-zone{margin-bottom:var(--space-2)}
.formation .duree{width:var(--l);min-width:min(100%,var(--cote-min,8rem));margin-bottom:var(--space-3)}
.formation h3{margin:0 0 var(--space-1)}
.formation .cote--fin{margin:var(--space-3) 0}
.livrables{list-style:none;margin:0 0 var(--space-3)}
.livrables li{position:relative;padding-left:1.75rem;margin-bottom:.25rem}
.livrables li::before{content:"";position:absolute;left:0;top:.7em;width:14px;height:8px;border-left:1.5px solid var(--color-nuit);border-bottom:1.5px solid var(--color-nuit);transform:translateY(-60%) rotate(-45deg)}
.programme{border-top:var(--filet-w) solid var(--color-filet);padding-top:var(--space-2);font-size:var(--size-small)}
.programme ol{margin:var(--space-2) 0 var(--space-2) 1.25rem}
.programme li{margin-bottom:.25rem}
.programme .petit{margin-bottom:0}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
summary::-webkit-details-marker{display:none}
.pm{flex:none;width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none}
details[open]>summary .pm .v{display:none}
.programme summary{font-family:var(--font-title);font-weight:600;font-size:1.25rem;justify-content:flex-start}
@media (min-width:900px){.formation{grid-template-columns:230px minmax(0,1fr);gap:var(--space-5)}}

/* ---------- Preuve ---------- */
.demande{margin:var(--space-4) 0 0;padding:0 0 0 var(--space-3);border-left:var(--filet-w) solid var(--color-encre-douce);color:var(--color-encre-douce);max-width:60ch}
.preuve{display:grid;gap:var(--space-4);margin-top:var(--space-5);align-items:start}
.reponse{background:var(--color-neige);border:var(--filet-w) solid var(--color-filet);border-radius:var(--radius);padding:var(--space-4)}
.reponse .plaquette{margin-bottom:var(--space-3)}
.reponse .lib{font-weight:600;margin:0 0 .25rem}
.reponse blockquote{margin:0 0 var(--space-3);padding-left:var(--space-2);border-left:var(--filet-w) solid var(--color-encre-douce);color:var(--color-encre-douce);font-size:var(--size-small)}
.reponse blockquote p{margin:0}
.reponse .texte p{margin:0 0 var(--space-2)}
.reponse .verdict{margin:var(--space-3) 0 0;padding-top:var(--space-2);border-top:var(--filet-w) solid var(--color-filet);font-weight:500}
.jauge{width:150px;height:auto;margin:0}
.conclusion{margin-top:var(--space-5);font-family:var(--font-title);font-weight:600;font-size:var(--size-h3);line-height:var(--lh-h3);max-width:34ch}
.cas{margin-top:var(--space-5)}
.cas h3{margin-bottom:var(--space-2)}
.cas ul{list-style:none;columns:1;border-top:var(--filet-w) solid var(--color-filet)}
.cas li{padding:var(--space-1) 0;border-bottom:var(--filet-w) solid var(--color-filet);break-inside:avoid}
@media (min-width:900px){
  .preuve{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);align-items:center}
  .preuve .reponse{align-self:stretch}
  .cas ul{columns:2;column-gap:var(--space-5)}
}

/* ---------- Déroulement ---------- */
.etapes{display:grid;gap:0;margin:var(--space-5) 0 0;padding:0;list-style:none}
.etape{position:relative;padding:var(--space-4) var(--space-4) var(--space-4) 0;border-top:var(--filet-w) solid var(--color-texte-nuit)}
.etape::before{content:"";position:absolute;top:-8px;left:0;width:var(--filet-w);height:16px;background:var(--color-laiton)}
.etape h3{margin-bottom:var(--space-1)}
.etape .cote{margin-top:var(--space-2);max-width:21rem}
.sec--nuit .scinde img{border:0}
.sec--nuit .appel{margin:var(--space-5) 0 0}
@media (min-width:900px){.etapes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Formateur ---------- */
.formateur{display:grid;gap:var(--space-4);align-items:start}
.portrait img{width:100%;height:auto;border-radius:var(--radius)}
.portrait .cote{margin-top:var(--space-2)}
@media (min-width:900px){.formateur{grid-template-columns:300px minmax(0,1fr);gap:var(--space-5)}}
.formateur p{max-width:62ch}

/* ---------- Zone ---------- */
.communes{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin:var(--space-3) 0 var(--space-4);font-family:var(--font-title);font-weight:600;font-size:var(--size-h3);line-height:var(--lh-h3)}
.zone-photo{margin-top:var(--space-4)}
.zone-photo img{width:100%;height:auto;border-radius:var(--radius)}
.zone p{max-width:62ch}

/* ---------- FAQ ---------- */
.faq details{border-top:var(--filet-w) solid var(--color-filet);padding:var(--space-3) 0}
.faq details:last-of-type{border-bottom:var(--filet-w) solid var(--color-filet)}
.faq summary{font-family:var(--font-title);font-weight:600;font-size:var(--size-h3);line-height:var(--lh-h3)}
.faq details p{margin:var(--space-2) 0 0;max-width:62ch}
.faq h2{margin-bottom:var(--space-4)}

/* ---------- Contact ---------- */
.contact{display:grid;gap:var(--space-5);align-items:start}
.contact ul{list-style:none;margin:var(--space-4) 0}
.contact li{margin-bottom:var(--space-1)}
.agenda{background:var(--color-nuit-relevee);border:var(--filet-w) solid var(--color-regle-nuit);border-radius:var(--radius);padding:var(--space-3);min-height:20rem}
.agenda .secours{margin:var(--space-3) 0 0;font-size:var(--size-small);color:var(--color-texte-nuit)}
@media (min-width:900px){.contact{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}

/* ---------- Pied et pages légales ---------- */
.pied{background:var(--color-nuit);color:var(--color-texte-nuit);padding:var(--space-5) 0;border-top:var(--filet-w) solid var(--color-nuit-relevee);font-size:var(--size-small)}
.pied a{color:var(--color-neige)}
.pied p{margin:0 0 var(--space-1)}
.pied ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin:var(--space-2) 0}
.pied strong{color:var(--color-neige);font-family:var(--font-title);font-size:1.25rem}
.legal{padding:var(--space-6) 0}
.legal h1{font-size:var(--size-h2);line-height:var(--lh-h2);margin-bottom:var(--space-4)}
.legal h2{font-size:var(--size-h3);font-weight:600;line-height:var(--lh-h3);margin:var(--space-5) 0 var(--space-2);max-width:none}
.legal p,.legal ul{max-width:62ch}
.legal ul{margin:0 0 var(--space-3) 1.25rem}
.legal .retour{margin-top:var(--space-5)}

@media (prefers-reduced-motion:reduce){
  html.tm-js .barre,html.tm-js .cote{transition:none}
  html.tm-js .barre-zone:not(.is-in) .barre{transform:none}
  html.tm-js .cote:not(.is-in){clip-path:none}
}
.regle-pied{background:var(--color-nuit)}