/* ==========================================================================
   NG COUVREUR — Système graphique
   Couvreur à Propriano, Corse-du-Sud
   Robuste · architectural · fonctionnel. Zéro décoration gratuite.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
/* Palette extraite de la photographie NG Couvreur : tuile canal vieillie,
   enduit à la chaux, pierre granitique, zinc patiné, ombres chaudes.
   Contrastes vérifiés — 17 paires testées, toutes conformes AA, la plupart AAA. */
:root{
  color-scheme: light;

  /* --- Famille terracotta : une échelle, pas une couleur -------------- */
  --t900: #2E1710;   /* terre brûlée — grands blocs sombres, pied de page */
  --t800: #5C2A18;   /* brun rouge — survol des CTA */
  --t700: #8A3A1E;   /* terracotta profond — CTA, filets, états actifs */
  --t600: #A8471F;   /* terre cuite — accents secondaires, focus */
  --t500: #C25B2C;   /* rouge tuile — accents sur fond sombre */
  --t300: #E3A98C;   /* tuile claire — étiquettes sur fond sombre */
  --t100: #F5E4DA;   /* sable rosé — aplats doux */
  --t50:  #FBF4EF;   /* écru chaud — fonds de section */

  /* Alias historiques conservés pour ne rien casser dans les règles */
  --terre:      var(--t700);
  --terre-deep: var(--t800);

  /* --- Neutres chauds ------------------------------------------------ */
  --ink:        #1A1512;   /* brun presque noir — jamais de noir pur */
  --ink-80:     #3E3630;
  --ink-60:     #6E6459;   /* gris chaud */
  --ink-40:     #A0968A;

  --paper:      #FDFCFA;   /* blanc cassé */
  --sable:      #F2EDE5;   /* beige minéral très clair */
  --sable-deep: #E4DCD0;

  /* Zinc patiné — usage rare, repères techniques uniquement */
  --zinc:       #57616B;

  /* Filets : le trait de construction, jamais l'ombre portée */
  --line:       rgba(46,23,16,.16);
  --line-strong:rgba(46,23,16,.34);
  --line-light: rgba(255,255,255,.24);

  /* Voile photographique — chaud, accordé à la terre cuite */
  --veil-1: rgba(26,11,6,.90);
  --veil-2: rgba(26,11,6,.72);
  --veil-3: rgba(26,11,6,.30);
  --veil-4: rgba(26,11,6,.16);

  /* Grille */
  --shell:      78rem;
  --gutter:     clamp(1.25rem, 4vw, 3.5rem);
  --section:    clamp(4rem, 9vw, 8rem);

  /* Typographie */
  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-display: clamp(2.35rem, 7.2vw, 6rem);
  --fs-h1:      clamp(2.2rem,  5.2vw, 3.9rem);
  --fs-h2:      clamp(1.7rem,  3.5vw, 2.7rem);
  --fs-h3:      clamp(1.15rem, 1.7vw, 1.4rem);
  --fs-lead:    clamp(1.075rem,1.5vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   .9375rem;
  --fs-label:   .75rem;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-body); line-height:1.62;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg{ max-width:100%; display:block; }
/* <picture> n'est qu'un conteneur : il doit se comporter comme l'image
   qu'il enveloppe, sinon les recadrages en plein cadre s'effondrent. */
picture{ display:block; }
.hero__media picture,.cta__media picture,.service__media picture,.step picture{ height:100%; }
img{ height:auto; background:var(--sable-deep); }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--terre); outline-offset:3px; border-radius:1px;
}
.skip{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; z-index:200;
  background:var(--t700); color:#fff; padding:0; font-weight:700;
}
.skip:focus{
  width:auto; height:auto; clip-path:none; padding:.9rem 1.4rem;
  left:0; top:0;
}

/* --- 3. Typographie ------------------------------------------------------ */
.display,h1,h2,h3{
  font-weight:800; font-stretch:112%;
  letter-spacing:-.028em; line-height:1.0;
  text-wrap:balance; text-transform:uppercase;
}
.display{ font-size:var(--fs-display); line-height:.93; letter-spacing:-.035em; font-stretch:118%; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); letter-spacing:-.015em; line-height:1.15; }

.lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--ink-80); font-weight:500; max-width:36ch; letter-spacing:-.011em; }
.prose p{ max-width:62ch; }
.prose p + p{ margin-top:1.1em; }
.muted{ color:var(--ink-60); }
.small{ font-size:var(--fs-small); }

/* Étiquette de section : le repère, pas la décoration */
.label{
  display:flex; align-items:center; gap:.7rem;
  font-size:var(--fs-label); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--terre); font-stretch:100%;
}
.label::before{ content:""; width:1.75rem; height:2px; background:var(--terre); flex:none; }
.label--light{ color:var(--t300); }
.label--light::before{ background:var(--t300); }

/* --- 4. Grille ----------------------------------------------------------- */
/* Un enfant de grille a min-width:auto par défaut : sa largeur minimale est
   celle de son contenu. Avec des photos de 2560 px, les pistes explosent et la
   page déborde horizontalement. On neutralise pour toutes nos grilles. */
.services > *, .zones > *, .posts > *, .sequence > *, .split > *,
.steps > li, .article > *, .head > *, .form__row > *{ min-width:0; }
.step, .service, .post, .zone{ min-width:0; }
.step picture, .service__media picture{ max-width:100%; }
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); }
.section--sable{ background:var(--sable); }
.section--ecru{ background:var(--t50); }
.section--ink{ background:var(--t900); color:#fff; }
.section--ink .lead,.section--ink .muted{ color:rgba(255,255,255,.76); }
.rule{ height:1px; background:var(--line); border:0; }

.head{ display:grid; gap:1.15rem; margin-bottom:clamp(2.25rem,4vw,3.5rem); }
.head--split{ grid-template-columns:1fr; }
@media (min-width:56rem){
  .head--split{ grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr); align-items:end; gap:2.5rem 4rem; }
  .head--split .label{ grid-column:1 / -1; }
}

/* --- 5. Boutons ---------------------------------------------------------- */
.btn{
  white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:3.5rem; padding:0 1.6rem; border:2px solid transparent; border-radius:0;
  font-weight:700; font-size:.9375rem; letter-spacing:.05em; text-transform:uppercase;
  font-stretch:105%; text-decoration:none; cursor:pointer;
  transition:background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn--primary{ background:var(--t700); color:#fff; border-color:var(--t700); }
.btn--primary:hover{ background:var(--t800); border-color:var(--t800); }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn--outline:hover{ border-color:var(--t700); background:var(--t700); color:#fff; }
.btn--onphoto{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--onphoto:hover{ background:var(--terre); border-color:var(--terre); color:#fff; }
.btn--ghostphoto{ background:transparent; color:#fff; border-color:var(--line-light); }
.btn--ghostphoto:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--block{ width:100%; }
.btn__tel{ font-variant-numeric:tabular-nums; letter-spacing:.04em; }

.actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* Lien fléché : la seule micro-décoration autorisée */
.arrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:700; font-size:.9375rem; letter-spacing:.03em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); padding-bottom:.3rem;
  border-bottom:2px solid var(--line-strong);
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.arrow svg{ transition:transform .22s var(--ease); }
.arrow:hover{ color:var(--terre); border-color:var(--terre); }
.arrow:hover svg{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){ .arrow:hover svg{ transform:none; } }

/* --- 6. En-tête ---------------------------------------------------------- */
.header{
  position:sticky; top:0; z-index:90; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header__in{ display:flex; align-items:center; gap:1.25rem; min-height:4.75rem; }
.brand{
  display:flex; flex-direction:column; text-decoration:none; margin-right:auto; line-height:1;
}
.brand__name{ font-weight:800; font-stretch:118%; font-size:1.3rem; letter-spacing:-.02em; text-transform:uppercase; }
.brand__sub{
  white-space:nowrap; font-size:.625rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-60); margin-top:.3rem;
}
.nav{ display:none; }
@media (min-width:80rem){
  .nav{ display:block; }
  .nav ul{ display:flex; align-items:center; gap:1.6rem; }
  .nav a{
    display:inline-block; white-space:nowrap;
    text-decoration:none; font-weight:600; font-size:.9375rem; letter-spacing:.005em;
    padding:.4rem 0; border-bottom:2px solid transparent;
    transition:color .16s var(--ease), border-color .16s var(--ease);
  }
  .nav a:hover{ color:var(--terre); }
  .nav a[aria-current="page"]{ border-color:var(--terre); }
}
.header__cta{ display:none; }
@media (min-width:80rem){ .header__cta{ display:inline-flex; white-space:nowrap; min-height:2.9rem; padding:0 1.25rem; font-size:.8125rem; } }
.header__tel{
  display:none; text-decoration:none; font-weight:700; font-size:.9375rem;
  font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap;
}
@media (min-width:48rem){ .header__tel{ display:inline-flex; align-items:center; gap:.45rem; } }
.header__tel:hover{ color:var(--terre); }

.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:3rem; height:3rem; margin-right:-.5rem; background:none; border:0; cursor:pointer;
}
@media (min-width:80rem){ .burger{ display:none; } }
.burger span{ display:block; width:22px; height:2px; background:var(--ink); position:relative; transition:background .15s; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink);
  transition:transform .24s var(--ease), top .24s var(--ease);
}
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* Menu mobile */
.drawer{
  position:fixed; inset:4.75rem 0 0; z-index:89; background:var(--paper);
  display:flex; flex-direction:column; padding:1.5rem var(--gutter) 2rem;
  overflow-y:auto; transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.drawer[data-open="true"]{ opacity:1; transform:none; visibility:visible; }
@media (min-width:80rem){ .drawer{ display:none; } }
.drawer a.drawer__link{
  display:block; text-decoration:none; padding:1.05rem 0; border-bottom:1px solid var(--line);
  font-size:1.5rem; font-weight:800; font-stretch:110%; letter-spacing:-.02em; text-transform:uppercase;
}
.drawer a.drawer__link[aria-current="page"]{ color:var(--terre); }
.drawer__foot{ margin-top:auto; padding-top:1.75rem; display:grid; gap:.75rem; }
@media (prefers-reduced-motion:reduce){ .drawer{ transition:none; } }

/* --- 7. Hero ------------------------------------------------------------- */
.hero{ position:relative; background:var(--t900); isolation:isolate; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, var(--veil-1) 0%, var(--veil-2) 42%, var(--veil-3) 78%, var(--veil-4) 100%);
}
.hero__in{ position:relative; padding-block:clamp(4.5rem,12vw,9rem); color:#fff; }
.hero__title{ margin:1.5rem 0 0; color:#fff; max-width:16ch; }
.hero__sub{
  margin-top:1.4rem; font-size:var(--fs-lead); font-weight:500; line-height:1.45;
  color:rgba(255,255,255,.90); max-width:44ch; letter-spacing:-.008em;
}
.hero__actions{ margin-top:2.25rem; }
.hero--page .hero__in{ padding-block:clamp(3.25rem,8vw,6rem); }
.hero--page::after{
  background:linear-gradient(100deg, var(--veil-1) 0%, var(--veil-2) 50%, var(--veil-3) 100%);
}

/* Fil d'Ariane */
.crumbs{ font-size:.8125rem; color:rgba(255,255,255,.72); display:flex; flex-wrap:wrap; gap:.45rem; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:#fff; text-decoration:underline; }
.crumbs span[aria-hidden]{ color:rgba(255,255,255,.42); }

/* --- 8. Services --------------------------------------------------------- */
.services{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); }
@media (min-width:40rem){ .services{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:64rem){ .services{ grid-template-columns:repeat(3,1fr); } }
.service{ background:var(--paper); display:flex; }
.service__link{
  display:flex; flex-direction:column; text-decoration:none; width:100%;
  transition:background-color .2s var(--ease);
}
.service__link:hover{ background:var(--t50); }
.service__media{ position:relative; overflow:hidden; aspect-ratio:3/2; background:var(--sable-deep); }
.service__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.service__link:hover .service__media img{ transform:scale(1.035); }
@media (prefers-reduced-motion:reduce){ .service__link:hover .service__media img{ transform:none; } }
.service__body{ padding:1.6rem 1.5rem 1.75rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.service__body h3{ color:var(--ink); }
.service__body p{ color:var(--ink-60); font-size:var(--fs-small); line-height:1.55; margin:0; }
.service__more{
  margin-top:auto; padding-top:1rem; font-size:.8125rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--terre);
  display:inline-flex; align-items:center; gap:.5rem;
}
.service__link:hover .service__more svg{ transform:translateX(4px); }
.service__more svg{ transition:transform .22s var(--ease); }

/* --- 9. Blocs éditoriaux ------------------------------------------------- */
.split{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (min-width:56rem){
  .split{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split--wide-media{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
  .split--rev .split__media{ order:2; }
}
.split__media img{ width:100%; }
.split__body{ display:grid; gap:1.15rem; align-content:start; }

.figure{ margin:0; }
.figure figcaption{
  margin-top:.75rem; font-size:.8125rem; color:var(--ink-60); line-height:1.45;
  padding-left:.75rem; border-left:2px solid var(--terre);
}

/* Séquence avant / après */
.sequence{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:48rem){ .sequence{ grid-template-columns:repeat(3,1fr); } }
.step{ background:var(--paper); padding:0 0 1.4rem; }
.step picture{ aspect-ratio:3/2; }
.step img{ width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; }
.step__tag{
  display:block; margin:1.1rem 1.25rem .4rem; font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--terre);
}
.step p{ margin:0 1.25rem; font-size:var(--fs-small); color:var(--ink-60); }

/* --- 10. Méthode --------------------------------------------------------- */
.steps{ display:grid; gap:0; border-top:1px solid var(--line); }
@media (min-width:52rem){ .steps{ grid-template-columns:repeat(4,1fr); gap:0 2.5rem; } }
.steps li{ padding:1.6rem 0; border-bottom:1px solid var(--line); display:grid; gap:.55rem; align-content:start; }
@media (min-width:52rem){ .steps li{ border-bottom:0; border-top:3px solid var(--t700); padding-top:1.25rem; } }
.steps .n{
  font-size:.8125rem; font-weight:800; letter-spacing:.14em; color:var(--terre);
  font-variant-numeric:tabular-nums;
}
.steps h3{ font-size:1.0625rem; }
.steps p{ font-size:var(--fs-small); color:var(--ink-60); margin:0; }

/* --- 11. Zones ----------------------------------------------------------- */
.zones{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); }
@media (min-width:34rem){ .zones{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:60rem){ .zones{ grid-template-columns:repeat(3,1fr); } }
.zone{ background:var(--paper); padding:1.4rem 1.25rem; display:grid; gap:.3rem; }
.zone__name{ font-weight:800; font-stretch:108%; font-size:1.125rem; text-transform:uppercase; letter-spacing:-.015em; }
.zone__meta{ font-size:.8125rem; color:var(--ink-60); }
a.zone{ text-decoration:none; transition:background-color .18s var(--ease); }
a.zone:hover{ background:var(--t50); }
a.zone:hover .zone__name{ color:var(--terre); }

/* --- 12. Conseils -------------------------------------------------------- */
.posts{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); }
@media (min-width:48rem){ .posts{ grid-template-columns:repeat(3,1fr); } }
.post{ background:var(--paper); }
.post a{ display:grid; gap:.7rem; text-decoration:none; padding:1.6rem 1.4rem 1.9rem; height:100%; align-content:start; transition:background-color .18s var(--ease); }
.post a:hover{ background:var(--t50); }
.post h3{ font-size:1.1875rem; }
.post a:hover h3{ color:var(--terre); }
.post p{ font-size:var(--fs-small); color:var(--ink-60); margin:0; }

/* --- 13. CTA final ------------------------------------------------------- */
.cta{ position:relative; background:var(--t900); isolation:isolate; }
.cta__media{ position:absolute; inset:0; z-index:-2; }
.cta__media img{ width:100%; height:100%; object-fit:cover; }
.cta::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(95deg, var(--veil-1) 0%, var(--veil-2) 46%, var(--veil-3) 100%);
}
.cta__in{ position:relative; padding-block:clamp(4rem,9vw,7.5rem); color:#fff; display:grid; gap:1.4rem; justify-items:start; }
.cta h2{ color:#fff; max-width:15ch; }
.cta p{ color:rgba(255,255,255,.86); max-width:46ch; font-size:var(--fs-lead); font-weight:500; }
.cta .actions{ margin-top:.75rem; }

/* --- 14. Formulaire ------------------------------------------------------ */
.form{ display:grid; gap:1.4rem; }
.field{ display:grid; gap:.45rem; }
.field label{ font-size:.8125rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.field .req{ color:var(--terre); }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line-strong); border-radius:0; padding:.95rem 1rem; min-height:3.25rem;
  transition:border-color .16s var(--ease);
}
.field textarea{ min-height:9rem; resize:vertical; line-height:1.55; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--ink-40); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--ink); outline-offset:1px; }
.field .hint{ font-size:.8125rem; color:var(--ink-60); }
.field input[type="file"]{ padding:.75rem; background:var(--sable); cursor:pointer; }
.field--err input,.field--err select,.field--err textarea{ border-color:var(--terre); }

/* Case de consentement : une case à cocher n'est pas un champ de saisie,
   elle ne doit hériter ni de la hauteur minimale ni du cadre. */
/* Spécificité : .field label (0,1,1) l'emporterait sur .consent (0,1,0)
   et imposerait ses capitales. On monte au même niveau. */
.field label.consent{ display:flex; gap:.75rem; align-items:flex-start; cursor:pointer;
  text-transform:none; letter-spacing:0; font-weight:400;
  font-size:.9375rem; line-height:1.5; }
.consent input[type="checkbox"]{
  width:1.3rem; height:1.3rem; min-height:0; flex:none; margin:.12rem 0 0;
  padding:0; border:1px solid var(--line-strong); border-radius:0;
  accent-color:var(--t700); cursor:pointer; }
.consent a{ color:var(--t700); text-underline-offset:2px; }
.field--err .consent input[type="checkbox"]{ outline:2px solid var(--t600); outline-offset:2px; }
.err{ font-size:.8125rem; font-weight:600; color:var(--terre); }
@media (min-width:44rem){ .form__row{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; } }
.formnote{
  padding:1.1rem 1.25rem; background:var(--t50); border-left:3px solid var(--t700);
  font-size:var(--fs-small); color:var(--ink-80);
}
.formnote--alert{ border-left-color:var(--t600); }
.formnote strong{ color:var(--ink); }

/* Encart contact direct */
.contactcard{ border:1px solid var(--line); padding:clamp(1.5rem,3vw,2.25rem); display:grid; gap:1.1rem; align-content:start; }
.contactcard dt{ font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-60); margin-bottom:.3rem; }
.contactcard dd{ margin:0; font-size:1.0625rem; }
.contactcard .tel{
  font-size:clamp(1.6rem,3.4vw,2.1rem); font-weight:800; font-stretch:112%; letter-spacing:-.02em;
  text-decoration:none; font-variant-numeric:tabular-nums; display:inline-block;
}
.contactcard .tel:hover{ color:var(--terre); }

/* --- 15. Contenu long ---------------------------------------------------- */
.article{ display:grid; gap:2.5rem; }
@media (min-width:60rem){ .article{ grid-template-columns:minmax(0,1fr) 17rem; gap:4rem; align-items:start; } }
.article__body h2{ margin-top:2.5rem; font-size:clamp(1.4rem,2.4vw,1.85rem); }
.article__body h2:first-child{ margin-top:0; }
.article__body h3{ margin-top:1.75rem; font-size:1.125rem; }
.article__body p,.article__body ul{ max-width:64ch; }
.article__body p{ margin-top:.9rem; }
.article__body ul{ margin-top:1rem; display:grid; gap:.6rem; }
.article__body li{ padding-left:1.4rem; position:relative; color:var(--ink-80); }
.article__body li::before{
  content:""; position:absolute; left:0; top:.65em; width:.6rem; height:2px; background:var(--terre);
}
.aside{ border-top:3px solid var(--t700); padding-top:1.4rem; display:grid; gap:1rem; align-content:start; }
@media (min-width:60rem){ .aside{ position:sticky; top:6.5rem; } }

/* --- 16. Pied de page ---------------------------------------------------- */
.footer{ background:var(--t900); color:#fff; padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.footer__top{ display:grid; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--line-light); }
@media (min-width:56rem){ .footer__top{ grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,.9fr)); gap:3rem; } }
.footer__brand .brand__name{ font-size:1.6rem; }
.footer__brand p{ color:rgba(255,255,255,.68); margin-top:.9rem; font-size:var(--fs-small); max-width:32ch; }
.footer__tel{
  display:inline-block; margin-top:1.4rem; text-decoration:none;
  font-size:1.7rem; font-weight:800; font-stretch:112%; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.footer__tel:hover{ color:var(--terre); }
.footer h4{ font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:1rem; }
.footer nav ul{ display:grid; gap:.65rem; }
.footer nav a{ text-decoration:none; font-size:var(--fs-small); color:rgba(255,255,255,.86); }
.footer nav a:hover{ color:#fff; text-decoration:underline; }
.footer__bottom{
  padding-top:1.75rem; display:flex; flex-wrap:wrap; gap:.75rem 1.75rem;
  align-items:center; font-size:.8125rem; color:rgba(255,255,255,.55);
}
.footer__bottom a{ text-decoration:none; }
.footer__bottom a:hover{ color:#fff; text-decoration:underline; }

/* --- 17. Barre d'action mobile ------------------------------------------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--paper); border-top:1px solid var(--line-strong);
  padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:80rem){ .dock{ display:none; } }
.dock a{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:3.75rem; text-decoration:none; font-weight:700; font-size:.875rem;
  letter-spacing:.09em; text-transform:uppercase;
}
.dock a:first-child{ background:var(--t900); color:#fff; }
.dock a:last-child{ background:var(--t700); color:#fff; }
body.has-dock{ padding-bottom:3.75rem; }
@media (min-width:80rem){ body.has-dock{ padding-bottom:0; } }

/* --- 18. Apparition au scroll -------------------------------------------- */
/* Sans JS, tout reste visible : la classe n'est posée que par le script. */
.js .reveal{ opacity:0; transform:translateY(14px); }
.js .reveal.is-in{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; }
  .js .reveal.is-in{ transition:none; }
}