/* Formation Serrurier Duo — feuille de style
   Concept : les deux voies. À chaque étape, ce que vous faites (bleu)
   et ce que fait le formateur (tabac), côte à côte.
   Charte : encre brune #2A2521 · ivoire #FDFAF5 · bleu #2B5C8A · tabac #8A4B22
   Aplats uniquement : ni dégradé, ni halo, ni flou, ni forme organique.
   Titres : Lora · Texte : Mulish */

:root {
  --encre: #2A2521;
  --encre-2: #4A423C;
  --ivoire: #FDFAF5;
  --sable: #F3ECE2;
  --ligne: #E2D8CB;
  --blanc: #FFFFFF;
  --bleu: #2B5C8A;
  --bleu-fonce: #1F4568;
  --bleu-pale: #E4EEF7;
  --tabac: #8A4B22;
  --tabac-fonce: #6E3A18;
  --tabac-pale: #F6E8DA;
  --rouge: #A3271B;
  --titre: "Lora", Georgia, "Times New Roman", serif;
  --texte: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--texte); font-size: 1.075rem; line-height: 1.7; color: var(--encre); background: var(--ivoire); overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu-fonce); text-underline-offset: 0.2em; }
a:hover { color: var(--tabac); }
:focus-visible { outline: 3px solid var(--tabac); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.2; margin: 0 0 0.8rem; color: var(--encre); }
h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.15rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; }

.cadre { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .cadre { padding: 0 1.75rem; } }

.evitement { position: absolute; left: 1rem; top: -5rem; z-index: 100; background: var(--encre); color: var(--blanc); padding: 0.6rem 1rem; font-weight: 800; }
.evitement:focus { top: 1rem; color: var(--blanc); }
.piege { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.kicker { font-family: var(--titre); font-style: italic; font-weight: 600; font-size: 1.1rem; color: var(--tabac); margin: 0 0 0.4rem; }
.intro { font-size: 1.12rem; color: var(--encre-2); max-width: 46rem; }
.chapo { font-size: 1.2rem; color: var(--encre-2); max-width: 42rem; }
.renvoi { margin-top: 1.5rem; font-weight: 600; }
.note { font-size: 0.95rem; background: var(--sable); border-left: 4px solid var(--tabac); padding: 0.8rem 1rem; border-radius: 0 var(--r) var(--r) 0; }
.lien-fort { font-weight: 800; }

/* Étiquettes « Vous » / « Le formateur » */
.qui { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.45rem; padding: 0.1rem 0.5rem; border-radius: 3px; }
.voie--vous .qui, .etape__v .qui, .echange__q .qui { background: var(--bleu); color: var(--blanc); }
.voie--form .qui, .etape__f .qui, .echange__r .qui { background: var(--tabac); color: var(--blanc); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block; font: inherit; font-weight: 800; line-height: 1.25; text-decoration: none; text-align: center; cursor: pointer;
  background: var(--tabac); color: var(--blanc); border: 2px solid var(--tabac); border-radius: var(--r); padding: 0.75rem 1.3rem;
  transition: background-color .15s, border-color .15s, color .15s;
}
.bouton:hover { background: var(--tabac-fonce); border-color: var(--tabac-fonce); color: var(--blanc); }
.bouton--creux { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton--creux:hover { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.bouton--clair { background: var(--ivoire); color: var(--encre); border-color: var(--ivoire); }
.bouton--clair:hover { background: var(--tabac-pale); border-color: var(--tabac-pale); color: var(--encre); }
.bouton:disabled { opacity: .6; cursor: progress; }
.boutons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- En-tête ---------- */
.tete { background: var(--ivoire); border-bottom: 1px solid var(--ligne); }
.tete__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; min-height: 4.5rem; }
.marque { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--encre); font-family: var(--titre); font-weight: 700; font-size: 1.2rem; line-height: 1.15; }
.marque em { color: var(--tabac); }
.marque img { width: 42px; height: 42px; }
.menu-bouton { display: none; align-items: center; gap: 0.5rem; font: inherit; font-weight: 800; color: var(--encre); background: transparent; border: 2px solid var(--encre); border-radius: var(--r); padding: 0.4rem 0.85rem; cursor: pointer; }
.js .menu-bouton { display: inline-flex; }
.menu-bouton__traits, .menu-bouton__traits::before, .menu-bouton__traits::after { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
.menu-bouton__traits::before, .menu-bouton__traits::after { content: ""; position: absolute; left: 0; }
.menu-bouton__traits::before { top: -5px; } .menu-bouton__traits::after { top: 5px; }
.menu ul { list-style: none; margin: 0; padding: 0 0 1rem; }
.js .menu { display: none; width: 100%; }
.js .menu.est-ouvert { display: block; }
.menu a { display: block; padding: 0.6rem 0; color: var(--encre); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--ligne); }
.menu a:hover { color: var(--tabac); }
.menu a[aria-current="page"] { color: var(--tabac); }
.menu__cta a { margin-top: 0.8rem; text-align: center; background: var(--bleu); color: var(--blanc) !important; border: 0; border-radius: var(--r); padding: 0.65rem 1rem; font-weight: 800; }
.menu__cta a:hover, .menu .menu__cta a[aria-current="page"] { background: var(--bleu-fonce); }
@media (min-width: 72rem) {
  .js .menu-bouton { display: none; }
  .menu, .js .menu { display: block; width: auto; }
  .menu ul { display: flex; align-items: center; gap: 0.2rem; padding: 0; }
  .menu a { border: 0; padding: 0.4rem 0.55rem; font-size: 0.98rem; }
  .menu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--tabac); }
  .menu__cta a { margin: 0 0 0 0.4rem; padding: 0.55rem 1rem; }
  .menu .menu__cta a[aria-current="page"] { box-shadow: none; }
}

/* ---------- Une ---------- */
.une { padding: 2.5rem 0 3.5rem; }
.une__grille { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 60rem) { .une__grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3.5rem; } .une { padding: 4rem 0 4.5rem; } }
.une__photo { margin: 0; position: relative; isolation: isolate; }
.une__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
@media (min-width: 60rem) {
  .une__photo img { aspect-ratio: 4 / 5; }
  .une__photo::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 2px solid var(--bleu); border-radius: var(--r); z-index: -1; }
}
.faits { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.faits li { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); padding: 0.35rem 0.75rem; font-size: 0.95rem; }
.faits b { color: var(--tabac-fonce); }

/* ---------- Blocs ---------- */
.bloc { padding: 3.5rem 0; }
@media (min-width: 60rem) { .bloc { padding: 4.75rem 0; } }
.bloc--clair { background: var(--sable); }
.bloc--sombre { background: var(--encre); color: #EFE7DC; }
.bloc--sombre h2 { color: var(--blanc); }
.bloc--sombre .kicker { color: #E7B98F; }
.bloc--sombre .intro { color: #EFE7DC; }

/* ---------- Duo : deux voies côte à côte ---------- */
.duos { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.duo { display: grid; border-radius: var(--r); overflow: hidden; border: 1px solid var(--ligne); }
@media (min-width: 44rem) { .duo { grid-template-columns: 1fr 1fr; } }
.voie { padding: 1.1rem 1.25rem; }
.voie p:last-child, .voie ul:last-child { margin-bottom: 0; }
.voie--vous { background: var(--bleu-pale); }
.voie--form { background: var(--tabac-pale); }
.duo__dit { font-family: var(--titre); font-style: italic; font-weight: 600; font-size: 1.2rem; color: var(--bleu-fonce); line-height: 1.35; }
.duo__label { font-weight: 800; margin-bottom: 0.3rem !important; }
.voie ul { padding-left: 1.1rem; }
.voie li { margin-bottom: 0.25rem; }

/* ---------- Parcours en deux couloirs ---------- */
.parcours { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.etape { display: grid; border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; background: var(--blanc); }
.etape__n { margin: 0; padding: 0.8rem 1rem; font-family: var(--titre); font-weight: 700; font-size: 1.15rem; display: flex; align-items: baseline; gap: 0.6rem; border-bottom: 1px solid var(--ligne); }
.etape__n span { font-family: var(--texte); font-weight: 800; font-size: 0.85rem; width: 1.7rem; height: 1.7rem; display: inline-grid; place-items: center; border-radius: 50%; background: var(--encre); color: var(--blanc); flex: none; }
.etape__v, .etape__f { padding: 0.9rem 1rem; }
.etape__v { background: var(--bleu-pale); }
.etape__f { background: var(--tabac-pale); }
.etape__v p:last-child, .etape__f p:last-child { margin: 0; font-size: 0.97rem; }
@media (min-width: 64rem) {
  .parcours { grid-template-columns: repeat(5, 1fr); grid-template-rows: auto auto auto; gap: 0; border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; }
  .etape { grid-row: span 3; grid-template-rows: subgrid; border: 0; border-radius: 0; border-right: 1px solid var(--ligne); }
  .etape:last-child { border-right: 0; }
  .etape__v { border-bottom: 1px dashed #B9CCE0; }
}

/* ---------- Franchise / code NAF ---------- */
.franc { display: grid; gap: 2rem; margin-top: 1.25rem; }
@media (min-width: 60rem) { .franc { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; align-items: start; } }
.franc__texte p { max-width: 42rem; }
.franc__photo { margin: 0; }
.franc__photo img { border-radius: var(--r); width: 100%; }
.franc__photo figcaption { font-size: 0.88rem; color: var(--encre-2); margin-top: 0.5rem; font-style: italic; }
.citation { margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--tabac-pale); border-left: 5px solid var(--tabac); border-radius: 0 var(--r) var(--r) 0; }
.citation p { font-family: var(--titre); font-style: italic; font-weight: 600; font-size: 1.25rem; margin: 0 0 0.35rem; }
.citation footer { font-size: 0.85rem; color: var(--encre-2); }

/* ---------- L'essentiel ---------- */
.bref { margin: 1.5rem 0 0; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); }
.bref > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: 0.8rem 1.2rem; border-bottom: 1px solid var(--ligne); }
.bref > div:last-child { border-bottom: 0; }
.bref dt { font-weight: 800; }
.bref dd { margin: 0; }
@media (max-width: 34rem) { .bref > div { grid-template-columns: 1fr; gap: 0.1rem; } }

/* ---------- Appel ---------- */
.appel { background: var(--bleu-fonce); color: var(--blanc); padding: 2.75rem 0; }
.appel__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.appel__titre { font-family: var(--titre); font-weight: 700; font-size: 1.65rem; line-height: 1.25; margin: 0 0 0.3rem; }
.appel p { margin: 0; }

/* ---------- Pages intérieures ---------- */
.entete { padding: 2.5rem 0 2.75rem; background: var(--sable); border-bottom: 1px solid var(--ligne); }
@media (min-width: 60rem) { .entete { padding: 3.5rem 0 3.75rem; } }
.ariane ol { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; font-size: 0.9rem; color: var(--encre-2); }
.ariane li + li::before { content: "›"; margin: 0 0.5rem; color: var(--tabac); }
.ariane a { color: var(--encre-2); }
.ariane [aria-current] { font-weight: 800; color: var(--encre); }

.roles { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.5rem; }
.role__quand { font-family: var(--titre); font-weight: 700; font-size: 1.15rem; margin: 0 0 0.5rem; }

.deux { display: grid; gap: 1.5rem; margin-top: 1.25rem; }
@media (min-width: 52rem) { .deux { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); padding: 1.3rem 1.4rem; }
.carte--oui { border-top: 6px solid var(--bleu); }
.carte--non { border-top: 6px solid var(--rouge); }
.carte ul { padding-left: 1.2rem; margin: 0; }
.carte li { margin-bottom: 0.5rem; }
.carte--oui li::marker { content: "✓  "; color: var(--bleu); font-weight: 800; }
.carte--non li::marker { content: "✕  "; color: var(--rouge); font-weight: 800; }
.liste-douce { padding-left: 1.2rem; }
.liste-douce li { margin-bottom: 0.45rem; }
.liste-douce li::marker { color: var(--tabac); }

.methode { display: grid; gap: 2rem; margin-top: 1.25rem; }
@media (min-width: 60rem) { .methode { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; align-items: start; } }
.methode__liste { padding-left: 0; list-style: none; margin: 0; }
.methode__liste li { padding: 1rem 0; border-bottom: 1px solid var(--ligne); }
.methode__liste b { font-family: var(--titre); font-size: 1.2rem; color: var(--tabac-fonce); }
.methode__photo { margin: 0; }
.methode__photo img { border-radius: var(--r); }

.objectifs { columns: 1; padding-left: 1.2rem; margin-top: 1rem; }
@media (min-width: 52rem) { .objectifs { columns: 2; column-gap: 3rem; } }
.objectifs li { break-inside: avoid; margin-bottom: 0.6rem; }
.objectifs li::marker { color: var(--tabac); }

.modules { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 1.5rem; }
.module__tete { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.6rem; }
.module__tete h3 { margin: 0; }
.module__code { font-weight: 800; font-size: 0.85rem; background: var(--encre); color: var(--blanc); padding: 0.1rem 0.5rem; border-radius: 3px; }
figure.large { margin: 0; }
figure.large img { border-radius: var(--r); width: 100%; max-height: 28rem; object-fit: cover; }
figure.large figcaption { font-size: 0.88rem; color: var(--encre-2); margin-top: 0.5rem; font-style: italic; }

.table-defil { overflow-x: auto; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; }
th, td { text-align: left; vertical-align: top; padding: 0.8rem 1rem; border-bottom: 1px solid var(--ligne); }
thead th { background: var(--sable); font-size: 0.9rem; }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-family: var(--titre); color: var(--tabac-fonce); }

.trois { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 1rem; counter-reset: t; }
@media (min-width: 48rem) { .trois { grid-template-columns: repeat(3, 1fr); } }
.trois li { border: 1px solid #5A514A; border-radius: var(--r); padding: 1.1rem 1.25rem; }
.trois b { display: block; font-family: var(--titre); font-size: 1.45rem; color: #E7B98F; }
.mots { margin: 1.5rem 0 0; display: grid; gap: 0.75rem; }
@media (min-width: 52rem) { .mots { grid-template-columns: 1fr 1fr; } }
.mots > div { background: var(--sable); border-radius: var(--r); padding: 0.9rem 1.1rem; }
.mots dt { font-family: var(--titre); font-weight: 700; }
.mots dd { margin: 0.2rem 0 0; }

/* ---------- Questions : fil de conversation ---------- */
.questions { display: grid; gap: 2rem; padding-top: 2.5rem; padding-bottom: 3.5rem; }
@media (min-width: 60rem) { .questions { grid-template-columns: 13rem minmax(0, 1fr); gap: 3rem; } .sommaire-q { position: sticky; top: 1.5rem; align-self: start; } }
.sommaire-q p { font-weight: 800; margin: 0 0 0.4rem; }
.sommaire-q ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
@media (min-width: 60rem) { .sommaire-q ol { display: block; } .sommaire-q li { border-bottom: 1px solid var(--ligne); } }
.sommaire-q a { display: block; padding: 0.4rem 0.2rem; text-decoration: none; font-weight: 600; }
@media (max-width: 59.99rem) { .sommaire-q a { border: 1px solid var(--ligne); border-radius: var(--r); background: var(--blanc); padding: 0.35rem 0.7rem; } }
.fil { margin-bottom: 2.5rem; }
.fil > h2 { font-size: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--encre); }
.echange { display: grid; gap: 0.6rem; margin: 1.5rem 0; scroll-margin-top: 1.5rem; }
.echange__q, .echange__r { border-radius: var(--r); padding: 1rem 1.2rem; max-width: 40rem; }
.echange__q { background: var(--bleu-pale); justify-self: end; border-right: 5px solid var(--bleu); }
.echange__r { background: var(--tabac-pale); justify-self: start; border-left: 5px solid var(--tabac); }
@media (min-width: 44rem) { .echange__q { margin-left: 12%; } .echange__r { margin-right: 12%; } }
.echange__q h3 { font-size: 1.15rem; margin: 0; }
.echange__r p:last-child { margin: 0; }
.echange:target .echange__q { outline: 3px solid var(--bleu); }

/* ---------- Écrire : formulaire-lettre ---------- */
.ecrire { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .ecrire { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; } }
.lettre { background: var(--blanc); border: 1px solid var(--ligne); border-top: 6px solid var(--tabac); border-radius: var(--r); padding: 1.5rem 1.4rem; font-size: 1.12rem; }
@media (min-width: 48rem) { .lettre { padding: 2.25rem 2.5rem; } }
.lettre__a { font-family: var(--titre); font-style: italic; color: var(--tabac); margin-bottom: 1.25rem; }
.lettre__ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; margin-bottom: 1rem; }
.lettre__ligne label { font-weight: 600; }
.lettre input, .lettre select {
  flex: 1 1 14rem; min-width: 0; font: inherit; color: var(--bleu-fonce); font-weight: 700; background: var(--bleu-pale);
  border: 0; border-bottom: 2px solid var(--bleu); border-radius: 3px 3px 0 0; padding: 0.35rem 0.5rem;
}
.lettre select { flex: 0 1 auto; cursor: pointer; }
.lettre input::placeholder, .lettre textarea::placeholder { color: #6A7C8E; font-weight: 400; }
.lettre__ligne--bloc { display: block; }
.lettre__ligne--bloc label { display: block; margin-bottom: 0.5rem; }
.lettre textarea { width: 100%; min-height: 9rem; font: inherit; font-size: 1rem; color: var(--encre); background: var(--bleu-pale); border: 0; border-bottom: 2px solid var(--bleu); border-radius: 3px 3px 0 0; padding: 0.6rem 0.7rem; resize: vertical; }
.lettre input:focus-visible, .lettre select:focus-visible, .lettre textarea:focus-visible { outline-offset: 1px; }
.lettre__note { font-size: 0.87rem; color: var(--encre-2); }
.oblig { color: var(--rouge); }
.ecrire__photo { margin: 0 0 1.5rem; }
.ecrire__photo img { border-radius: var(--r); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.ecrire__cote h2 { font-size: 1.45rem; }
.ensuite { padding-left: 1.3rem; }
.ensuite li { margin-bottom: 0.5rem; }
.ensuite li::marker { font-family: var(--titre); font-weight: 700; color: var(--tabac); }

/* ---------- Languette fixe ---------- */
.languette { display: none; }
@media (min-width: 62rem) {
  .languette {
    display: block; position: fixed; right: 0; top: 50%; z-index: 30; transform: translateY(-50%);
    writing-mode: vertical-rl; background: var(--tabac); color: var(--blanc); text-decoration: none; font-weight: 800; font-size: 0.92rem;
    padding: 1rem 0.55rem; border-radius: var(--r) 0 0 var(--r);
  }
  .languette:hover { background: var(--tabac-fonce); color: var(--blanc); }
}

/* ---------- Pied ---------- */
.pied { background: var(--encre); color: #E6DDD2; }
.pied a { color: var(--blanc); }
.pied a:hover { color: #E7B98F; }
.pied__haut { display: grid; gap: 2rem; padding-top: 3rem; padding-bottom: 2.5rem; }
@media (min-width: 56rem) { .pied__haut { grid-template-columns: 1.5fr 1fr; gap: 3rem; } }
.pied__duo { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .pied__duo { grid-template-columns: 1fr 1fr; } }
.pied__duo > div { border-top: 3px solid var(--bleu); padding-top: 0.75rem; }
.pied__duo > div + div { border-top-color: #C07A45; }
.pied__qui { font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; color: var(--blanc); margin-bottom: 0.4rem; }
.pied__nom { font-family: var(--titre); font-weight: 700; font-size: 1.35rem; color: var(--blanc); }
.pied__nom em { color: #E7B98F; }
.pied ul { list-style: none; padding: 0; }
.pied li { margin-bottom: 0.35rem; }
.pied__offre { font-weight: 700; color: var(--blanc); }
.pied__bas { border-top: 1px solid #45403B; padding: 1.5rem 0; font-size: 0.86rem; }
.pied__bas p { max-width: 62rem; }
.pied__legal { color: #B3AAA0; margin: 0; }

@media (prefers-reduced-motion: reduce) { .bouton { transition: none; } }
@media print { .tete, .languette, .appel, .pied, .evitement { display: none !important; } }

/* Mentions légales, CGV et pied de page légal */
.legal { max-width: 72ch; margin-top: 2rem; }
.legal section + section { margin-top: 2.4rem; }
.legal h2 { font-size: 1.35rem; padding-bottom: .45rem; margin: 0 0 1rem; border-bottom: 2px solid var(--bleu-fonce); }
.legal h3 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; }
.legal p { margin: 0 0 .9rem; }
.legal ul { list-style: disc; padding-left: 1.3rem; margin: 0 0 1rem; }
.legal li { margin-bottom: .35rem; }
.legal a { overflow-wrap: anywhere; }
.pied-legal { margin-top: 1rem; font-size: .88rem; }
.pied-legal p { margin: 0 0 .35rem; }
.pied-legal a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Notification d'envoi : carte-lettre timbrée, bas gauche ---------- */
.courrier { position: fixed; z-index: 1000; left: 1rem; bottom: 1rem; width: min(24rem, calc(100% - 2rem)); background: var(--ivoire); color: var(--encre); border: 1px solid var(--ligne); border-radius: var(--r); padding: 1.3rem 1.3rem 1rem; box-shadow: 0 12px 30px rgba(42, 37, 33, .22); }
.courrier:focus { outline: 3px solid var(--bleu); outline-offset: 3px; }
.courrier__timbre { float: right; display: grid; place-items: center; width: 3.2rem; height: 3.6rem; margin: 0 0 .5rem 1rem; border: 2px dashed var(--tabac); background: var(--tabac-pale); color: var(--tabac); transform: rotate(4deg); }
.courrier__titre { font-family: var(--titre); font-style: italic; font-size: 1.45rem; font-weight: 600; color: var(--bleu-fonce); margin: 0 0 .4rem; }
.courrier p { margin: 0 0 .5rem; }
.courrier__signe { font-family: var(--titre); font-style: italic; color: var(--tabac); }
.courrier__fermer { font: inherit; font-weight: 700; background: none; border: 0; border-bottom: 2px solid var(--bleu); color: var(--bleu-fonce); padding: .2rem 0; cursor: pointer; }
.courrier__fermer:hover { color: var(--tabac); border-color: var(--tabac); }
@media (prefers-reduced-motion: no-preference) { .courrier:not([hidden]) { animation: courrier-pose .5s ease-out; } }
@keyframes courrier-pose { from { opacity: 0; transform: translateY(2rem) rotate(-3deg); } to { opacity: 1; transform: none; } }
[data-notif][hidden] { display: none !important; }