/* Enseignio Design : jeune et dynamique, sans couleurs criardes. Un seul élément qui ressort : la vidéo dans
   son écran, avec la pastille « Maquette offerte » collée comme un autocollant de vitrine. */
@font-face { font-family: 'Bricolage'; font-weight: 800; font-display: swap; src: url('bricolage-800.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage'; font-weight: 800; font-display: swap; src: url('bricolage-ext-800.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Bricolage'; font-weight: 600; font-display: swap; src: url('bricolage-600.woff2') format('woff2'); }
@font-face { font-family: 'Instrument'; font-weight: 400; font-display: swap; src: url('instrument-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument'; font-weight: 400; font-display: swap; src: url('instrument-ext-400.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Instrument'; font-weight: 600; font-display: swap; src: url('instrument-600.woff2') format('woff2'); }

:root {
  --encre: #1C2B3A;        /* texte, fond des tarifs et du pied */
  --encre-douce: #51606E;  /* texte secondaire */
  --canard: #237A72;       /* accent : chiffres, liens, fond du questionnaire */
  --canard-fonce: #1B5F59;
  --brume: #E6F1EE;        /* fonds de section */
  --brume-claire: #F3F8F6;
  --abricot: #F6A55E;      /* boutons principaux (texte encre), pastille */
  --sable: #F8E3C8;        /* étiquette vitrine */
  --sauge: #C5E3D8;        /* étiquette boutique */
  --rose: #F2C4BA;
  --trait: #D5E4DF;        /* bords des champs */
  --blanc: #FFFFFF;
  --rayon: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--blanc); color: var(--encre); font: 400 1.0625rem/1.6 'Instrument', system-ui, sans-serif; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--canard-fonce); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--canard-fonce); outline-offset: 3px; border-radius: 6px; }
.tarifs :focus-visible, .pied :focus-visible { outline-color: var(--abricot); }
.demande-texte :focus-visible { outline-color: var(--blanc); }
h1, h2, h3 { font-family: 'Bricolage', 'Instrument', sans-serif; line-height: 1.05; margin: 0; }
h1 { font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.8rem); letter-spacing: -0.03em; }
h2 { font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -0.02em; margin-bottom: .6rem; }
h3 { font-weight: 600; font-size: 1.2rem; line-height: 1.25; }
p { margin: 0 0 1rem; }
.cadre { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.intro { color: var(--encre-douce); max-width: 46ch; font-size: 1.125rem; margin-bottom: 2.5rem; }
.petit { font-size: .9rem; color: var(--encre-douce); }
.evitement { position: absolute; left: -999px; top: .5rem; background: var(--blanc); padding: .5rem 1rem; z-index: 50; }
.evitement:focus { left: 1rem; }
mark.a-completer { background: var(--sable); color: var(--encre); padding: 0 .3em; border-radius: 4px; }

/* ---------- boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.4rem; border-radius: 999px; font: 600 1rem/1.2 'Instrument', sans-serif; text-decoration: none; border: 2px solid transparent; cursor: pointer; text-align: center; }
.bouton-plein { background: var(--abricot); color: var(--encre); }
.bouton-plein:hover { background: #F9BC85; }
.bouton-contour { border-color: var(--encre); color: var(--encre); background: transparent; }
.bouton-contour:hover { background: var(--brume); }
.bouton-petit { min-height: 2.5rem; padding: .45rem 1rem; font-size: .95rem; }
.bouton-grand { min-height: 3.9rem; padding: 1rem 2.2rem; font-size: 1.15rem; }
/* le bouton de la maquette : dégradé abricot, ombre chaude, un reflet qui le traverse toutes les 4 s */
.bouton-vedette { position: relative; overflow: hidden; isolation: isolate; color: var(--encre); background: linear-gradient(135deg, #F9BC85 0%, var(--abricot) 45%, #EE8D45 100%); box-shadow: 0 10px 24px -10px rgba(238, 141, 69, .75), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .18s ease, box-shadow .18s ease; }
.bouton-vedette::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .75) 50%, transparent 72%); transform: translateX(-120%); animation: reflet 4s ease-in-out 1.2s infinite; }
@keyframes reflet { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.bouton-vedette:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(238, 141, 69, .9), inset 0 1px 0 rgba(255, 255, 255, .45); }
.bouton-vedette:active { transform: translateY(0); }
.bouton-grand.bouton-contour { background: var(--blanc); }
.bouton-grand.bouton-contour:hover { background: var(--brume); }
@media (prefers-reduced-motion: reduce) { .bouton-vedette::after { animation: none; display: none; } .bouton-vedette, .bouton-vedette:hover { transition: none; transform: none; } }

/* ---------- en-tête ---------- */
.entete { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--brume); }
.entete-interieur { display: flex; align-items: center; gap: 1.25rem; min-height: 4.5rem; }
.logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--encre); font: 800 1.5rem/1 'Bricolage', sans-serif; letter-spacing: -0.02em; }
.logo-icone { width: 2.6rem; height: 2.6rem; flex: none; }
.logo-studio { font-weight: 600; font-family: 'Bricolage', sans-serif; color: var(--canard); margin-left: .28em; letter-spacing: 0; }
.pied .logo-studio { color: #7FD1C2; }
.nav { margin-left: auto; }
.nav ul, .langues ul, .pied-liens { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; }
.nav a { color: var(--encre); text-decoration: none; font-weight: 600; }
.nav a:hover { color: var(--canard); }
.langues ul { gap: .15rem; }
.langues a { display: inline-block; padding: .25rem .4rem; font-size: .8rem; font-weight: 600; color: var(--encre-douce); text-decoration: none; border-radius: 6px; }
.langues a[aria-current] { background: var(--brume); color: var(--encre); }
@media (max-width: 62rem) { .nav { display: none; } .entete .langues { margin-left: auto; } }
@media (max-width: 34rem) { .entete .bouton-petit { display: none; } .logo { font-size: 1.3rem; } }

/* ---------- ouverture : titre, accroche et vidéo ---------- */
.ouverture { padding-block: 3.5rem 5rem; background:
  radial-gradient(circle at 8% 12%, #FFD9B8 0, transparent 38%),
  radial-gradient(circle at 92% 88%, #BFE6DA 0, transparent 42%),
  radial-gradient(circle at 72% 6%, #F8C9C0 0, transparent 30%),
  var(--brume-claire); }
.ouverture-grille { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 60rem) {
  .ouverture-grille { grid-template-columns: 1fr 1.1fr; grid-template-areas: "texte ecran" "actions actions"; gap: 2.5rem 3.5rem; }
  .ouverture-texte { grid-area: texte; } .ecran { grid-area: ecran; } .actions-ouverture { grid-area: actions; }
  .ouverture { padding-block: 4rem 4.5rem; }
}
/* les deux boutons, centrés sous le titre et la vidéo */
.actions-ouverture { justify-content: center; gap: 1rem; }
@media (max-width: 40rem) { .actions-ouverture .bouton { width: 100%; } }
.accroche { font: 600 clamp(1.35rem, 2.4vw, 1.75rem)/1.25 'Bricolage', sans-serif; color: var(--canard-fonce); max-width: 24ch; margin: 1.1rem 0 1.4rem; }
.chapeau { font-size: 1.125rem; max-width: 44ch; margin: 0; color: var(--encre-douce); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.ecran { margin: 0; position: relative; }
.ecran-cadre { border: 10px solid var(--encre); border-radius: 22px; overflow: hidden; background: var(--encre); }
.ecran-cadre video { width: 100%; aspect-ratio: 16 / 9; background: var(--encre); }
.ecran figcaption { margin-top: .8rem; font-size: .9rem; color: var(--encre-douce); }
/* la pastille : un autocollant rond, posé de travers sur le coin de l'écran */
.pastille { position: absolute; top: -1.6rem; right: -1rem; width: 7.2rem; height: 7.2rem; margin: 0; border-radius: 50%; background: var(--abricot); color: var(--encre); display: grid; place-items: center; text-align: center; padding: .8rem; font: 800 1.05rem/1.05 'Bricolage', sans-serif; transform: rotate(9deg); border: 4px solid var(--brume-claire); }
@media (max-width: 40rem) { .pastille { width: 5.6rem; height: 5.6rem; font-size: .85rem; top: -1.3rem; right: -.3rem; } }

/* ---------- exemples : des cartes qui ouvrent chaque site ---------- */
.exemples { padding-block: 5rem 4.5rem; }
.exemples-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
@media (min-width: 48rem) { .exemples-grille { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.exemple-carte { display: grid; height: 100%; text-decoration: none; color: var(--encre); background: var(--blanc); border: 1px solid var(--brume); border-radius: var(--rayon); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.exemple-carte:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(28, 43, 58, .45); }
@media (prefers-reduced-motion: reduce) { .exemple-carte, .exemple-carte img { transition: none; } .exemple-carte:hover { transform: none; } }
.exemple-photo { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--brume); }
.exemple-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.exemple-carte:hover .exemple-photo img { transform: scale(1.04); }
.exemple-photo .attente { height: 100%; display: grid; place-items: center; color: var(--encre-douce); font-weight: 600; text-align: center; background: repeating-linear-gradient(-45deg, var(--brume) 0 14px, var(--brume-claire) 14px 28px); }
.exemple-type { position: absolute; left: 1rem; top: 1rem; padding: .3rem .8rem; border-radius: 999px; font-weight: 600; font-size: .85rem; background: var(--blanc); color: var(--encre); }
.exemple-type-boutique { background: var(--abricot); }
.exemple-texte { display: grid; gap: .2rem; padding: 1.2rem 1.4rem 1.4rem; }
.exemple-nom { font: 800 1.45rem/1.15 'Bricolage', sans-serif; letter-spacing: -0.015em; }
.exemple-metier { color: var(--encre-douce); }
.exemple-voir { margin-top: .6rem; font-weight: 600; color: var(--canard-fonce); text-decoration: underline; text-underline-offset: .2em; }

/* ---------- la méthode : une vraie suite, donc numérotée ---------- */
.methode { background: var(--brume); padding-block: 4.5rem; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; counter-reset: etape; }
@media (min-width: 48rem) { .etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .etapes { grid-template-columns: repeat(4, 1fr); } }
.etapes li { counter-increment: etape; border-top: 3px solid var(--encre); padding-top: 1rem; }
.etapes li::before { content: counter(etape); display: block; font: 800 3.4rem/1 'Bricolage', sans-serif; color: var(--canard); margin-bottom: .6rem; }
.etapes h3 { margin-bottom: .5rem; }
.etapes p { color: var(--encre-douce); }

/* ---------- ce qui est compris ---------- */
.inclus { padding-block: 4.5rem; }
.inclus-liste { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.6rem 3rem; }
@media (min-width: 48rem) { .inclus-liste { grid-template-columns: repeat(2, 1fr); } }
.inclus-liste li { padding-left: 2.2rem; position: relative; }
.inclus-liste li::before { content: ''; position: absolute; left: 0; top: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--canard); }
.inclus-liste li:nth-child(4n+2)::before { background: var(--abricot); }
.inclus-liste li:nth-child(4n+3)::before { background: #8CC7B5; }
.inclus-liste li:nth-child(4n+4)::before { background: var(--rose); }
.inclus-liste h3 { margin-bottom: .25rem; }
.inclus-liste p { margin: 0; color: var(--encre-douce); }

/* ---------- tarifs : des étiquettes de magasin ---------- */
.tarifs { background: var(--encre); color: var(--blanc); padding-block: 5rem; }
.tarifs .intro, .tarifs .petit { color: #C3CCD5; }
.etiquettes { display: grid; gap: 1.75rem; margin-bottom: 3rem; }
@media (min-width: 48rem) { .etiquettes { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
.etiquette { position: relative; color: var(--encre); border-radius: 14px; padding: 1.8rem 1.8rem 1.6rem 3.4rem; }
.etiquette::before { content: ''; position: absolute; left: 1.2rem; top: 1.9rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--encre); }
.etiquette-jaune { background: var(--sable); transform: rotate(-1.2deg); }
.etiquette-menthe { background: var(--sauge); transform: rotate(1deg); }
@media (prefers-reduced-motion: reduce) { .etiquette { transform: none; } }
.etiquette h3 { font-size: 1.35rem; }
.etiquette-prix { font: 800 clamp(3rem, 7vw, 4.2rem)/1 'Bricolage', sans-serif; letter-spacing: -0.02em; margin: .6rem 0 1rem; }
.etiquette-prix span { font: 600 .95rem/1 'Instrument', sans-serif; margin-left: .6rem; letter-spacing: 0; }
.etiquette p:last-child { margin: 0; }
.tarifs-suite { display: grid; gap: 3rem; }
@media (min-width: 60rem) { .tarifs-suite { grid-template-columns: 1.2fr 1fr; } }
.tarifs h3 { margin-bottom: 1rem; }
.options { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.options li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.options-prix { white-space: nowrap; font-weight: 600; color: var(--abricot); }
.options-suivi { border-bottom: 0 !important; }
.paiement ol { list-style: none; margin: 0; padding: 0; }
.paiement li { display: grid; gap: .1rem; padding: .9rem 0 .9rem 1.6rem; position: relative; border-left: 3px solid #3F8F86; }
.paiement li::before { content: ''; position: absolute; left: -9px; top: 1.15rem; width: 15px; height: 15px; border-radius: 50%; background: var(--abricot); }
.paiement li:first-child::before { background: var(--sauge); }
.paiement-quand { color: #C3CCD5; font-size: .95rem; }
.paiement-quoi { font: 600 1.25rem/1.3 'Bricolage', sans-serif; }

/* ---------- à propos, questions ---------- */
.apropos { padding-block: 5rem 1rem; }
.apropos p { max-width: 60ch; font-size: 1.15rem; }
.questions { padding-block: 3rem 5rem; }
.questions h2 { margin-bottom: 1.5rem; }
details { border-bottom: 1px solid var(--brume); max-width: 52rem; }
summary { cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; font: 600 1.15rem/1.35 'Bricolage', sans-serif; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: .3rem; top: .8rem; font: 800 1.6rem/1 'Bricolage', sans-serif; color: var(--canard); }
details[open] summary::after { content: '–'; }
details p { max-width: 60ch; color: var(--encre-douce); }

/* ---------- questionnaire ---------- */
.demande { background: var(--canard); color: var(--blanc); padding-block: 5rem; }
.demande-texte .petit { color: #DCEDE8; }
.demande-texte a { color: var(--blanc); }
.demande-grille { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) { .demande-grille { grid-template-columns: 1fr 1.6fr; gap: 4rem; } .demande-texte { position: sticky; top: 6.5rem; } }
.demande-texte p { max-width: 42ch; }
.questionnaire { display: grid; gap: 1.5rem; min-width: 0; }
.formulaire, .resultat { background: var(--blanc); color: var(--encre); border-radius: var(--rayon); padding: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 34rem) { .formulaire, .resultat { padding: 2.25rem; } }
.groupe { border: 0; margin: 0; padding: 0; display: grid; gap: 1rem; min-width: 0; }
.groupe + .groupe { border-top: 1px solid var(--brume); padding-top: 1.6rem; margin-top: .4rem; }
.groupe > legend { float: left; width: 100%; padding: 0; margin-bottom: .2rem; font: 600 1.3rem/1.2 'Bricolage', sans-serif; color: var(--canard-fonce); }
.aide { margin: 0; color: var(--encre-douce); font-size: .95rem; }
.formulaire label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; min-width: 0; }
.formulaire label small { font-weight: 400; color: var(--encre-douce); font-size: .88rem; }
.formulaire input:not([type=radio]):not([type=checkbox]):not([type=file]), .formulaire textarea, .formulaire select { font: 400 1rem/1.4 'Instrument', sans-serif; color: var(--encre); padding: .7rem .85rem; border: 2px solid var(--trait); border-radius: 10px; background: var(--blanc); width: 100%; min-width: 0; }
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus { border-color: var(--canard); outline: none; }
.formulaire input:focus-visible, .formulaire textarea:focus-visible, .formulaire select:focus-visible { outline: 3px solid var(--canard-fonce); outline-offset: 2px; }
.choix { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.choix legend { float: left; width: 100%; padding: 0; margin-bottom: .35rem; font-weight: 600; font-size: .95rem; }
.formulaire .choix label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; font-size: 1rem; padding: .5rem .9rem; border: 2px solid var(--trait); border-radius: 999px; cursor: pointer; }
.formulaire .choix label:has(input:checked) { border-color: var(--canard); background: var(--brume); }
.choix input, .jour input[type=checkbox] { accent-color: var(--canard); margin: 0; width: 1.05rem; height: 1.05rem; }
.deux { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .deux { grid-template-columns: 1fr 1fr; } }
/* horaires : un jour par ligne */
.horaires { display: grid; }
.jour { border: 0; margin: 0; padding: .65rem 0; border-bottom: 1px solid var(--brume); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; min-width: 0; }
.jour legend { float: left; width: 6.5rem; padding: 0; font-weight: 600; }
.formulaire .jour .ferme { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; }
.jour .creneau { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.formulaire .jour input[type=time] { width: auto; padding: .4rem .5rem; }
.jour.est-ferme .creneau { opacity: .35; pointer-events: none; }
@media (max-width: 34rem) { .jour legend { width: auto; margin-right: auto; } .jour .creneau { flex-basis: 100%; } }
/* photos */
.choisir { justify-self: start; }
.choisir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choisir .bouton { cursor: pointer; }
.choisir:focus-within .bouton { outline: 3px solid var(--canard-fonce); outline-offset: 2px; }
.liste-photos { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.liste-photos:empty { display: none; }
.liste-photos li { display: grid; grid-template-columns: 5rem 1fr; gap: .4rem 1rem; align-items: start; padding: .8rem; border: 1px solid var(--trait); border-radius: 12px; }
.liste-photos .vignette { grid-row: span 4; width: 5rem; height: 5rem; object-fit: cover; border-radius: 8px; background: var(--brume); display: grid; place-items: center; font-size: .8rem; color: var(--encre-douce); }
.liste-photos .nom { font-size: .85rem; color: var(--encre-douce); overflow-wrap: anywhere; }
.lien { background: none; border: 0; padding: 0; color: var(--canard-fonce); text-decoration: underline; font: inherit; cursor: pointer; justify-self: start; }
.retirer { font-size: .88rem; }
/* bouton toujours à portée de main pendant qu'on remplit */
.envoi { position: sticky; bottom: 0; z-index: 2; background: var(--blanc); margin-inline: -1.5rem; padding: .9rem 1.5rem calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--brume); border-radius: 0 0 var(--rayon) var(--rayon); }
@media (min-width: 34rem) { .envoi { margin-inline: -2.25rem; padding-inline: 2.25rem; } }
.formulaire .petit { margin: 0; }
.erreur { margin: 0; color: #B3261E; font-weight: 600; }
/* l'email prêt */
.resultat h3 { font: 800 1.6rem/1.15 'Bricolage', sans-serif; }
.resultat:focus { outline: none; }
.reference { margin: 0; padding: .8rem 1rem; background: var(--sable); border-radius: 10px; font-weight: 600; }
.enveloppe { margin: 0; display: grid; gap: .6rem; }
.enveloppe div { display: grid; grid-template-columns: 7rem 1fr; gap: .2rem 1rem; align-items: baseline; }
@media (max-width: 34rem) { .enveloppe div { grid-template-columns: 1fr; } }
.enveloppe dt { color: var(--encre-douce); font-size: .9rem; }
.enveloppe dd { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; overflow-wrap: anywhere; }
.partage, .ordinateur { display: grid; gap: 1rem; }
.partage[hidden], .ordinateur[hidden], .resultat[hidden] { display: none; }
.partage p, .ordinateur p { margin: 0; }
.ordinateur ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .35rem; }
.a-joindre { margin: .3rem 0 0; padding-left: 1.2rem; font-size: .92rem; }
.resultat pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .85rem/1.5 ui-monospace, Menlo, Consolas, monospace; background: var(--brume-claire); border: 1px solid var(--brume); border-radius: 10px; padding: 1rem; max-height: 18rem; overflow: auto; margin: 0; }

/* ---------- pied ---------- */
.pied { background: var(--encre); color: #C3CCD5; padding-block: 3rem; }
.pied .logo { color: var(--blanc); }
.pied a { color: var(--blanc); }
.pied-interieur { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 48rem) { .pied-interieur { grid-template-columns: 1fr auto auto; gap: 3rem; } }
.pied-contact { margin: 1rem 0 0; }
.pied-liens { flex-direction: column; gap: .5rem; }
.pied .langues a { color: #C3CCD5; }
.pied .langues a[aria-current] { background: rgba(255, 255, 255, .12); color: var(--blanc); }

/* ---------- pages simples ---------- */
.texte-long { padding-block: 3.5rem 5rem; max-width: 46rem; }
.texte-long h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 1.5rem; }
.texte-long h2 { font-size: 1.5rem; margin: 2rem 0 .6rem; }
.texte-long ul { padding-left: 1.2rem; }
.texte-long li { margin-bottom: .35rem; }