/* ============================================================
   Solicare, feuille de style unique.
   Direction « l'atelier ». Conforme au REFERENTIEL-SOLICARE
   du 8 août 2026, révisé le 10 août 2026.
   Palette section 2, typographie section 3, structure section 4.
   Aucune requête externe, aucune bordure latérale colorée,
   aucune capitale interlettrée, aucun fond crème.
   ============================================================ */

/* ---------- Police, auto-hébergée, licence SIL OFL ---------- */
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-grotesk-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-grotesk-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-grotesk-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-grotesk-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Couleurs conservées */
  --fond:#F2F3F5; --surface:#FFFFFF; --surface-alt:#F7F8FA;
  --encre:#191D24; --encre-2:#575E68;
  --accent:#2A4C7D; --accent-h:#1F3A61; --accent-doux:#E6EBF3;
  --succes:#3A6B4E; --succes-doux:#E5EEE9;
  --vigilance:#8A6212; --vigilance-doux:#F2ECDC;
  --risque:#9B3232; --risque-doux:#F2E4E2;
  /* Variantes sombres, officialisées le 2026-08-10 */
  --accent-clair:#7C9CC9; --encre-inv:#F4F6F9; --accent-tres-clair:#AFC4E0;
  /* Nuances de service, dérivées de l'encre pour les fonds sombres */
  --sombre-2:#22262E; --sur-sombre:#B9C2CE; --sur-sombre-2:#8E99A7;
  --filet:#DFE1E6; --filet-sombre:rgba(244,246,249,.14);

  /* Échelle d'espacement 4 et 8 */
  --e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px;--e6:32px;--e7:48px;--e8:64px;--e9:96px;--e10:128px;

  /* Typographie fluide, 16 à 19 px */
  --corps:clamp(16px,.92rem + .28vw,19px);
  --chapo:clamp(19px,1.05rem + .5vw,24px);
  --hero:clamp(38px,1.8rem + 3.6vw,64px);
  --h1:clamp(32px,1.7rem + 2.2vw,48px);
  --h2:clamp(26px,1.45rem + 1.4vw,36px);
  --h3:clamp(21px,1.2rem + .9vw,28px);
  --h4:clamp(18px,1.05rem + .55vw,22px);
  --label:clamp(14px,.82rem + .16vw,16px);
  --micro:clamp(12px,.72rem + .12vw,14px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--encre);
  font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:var(--corps);line-height:1.6;
  font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0 0 var(--e4)}
ul,ol{margin:0 0 var(--e4);padding-left:1.2em}
li{margin-bottom:var(--e2)}
a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--accent-h)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Conteneurs ---------- */
.page{max-width:1440px;margin-inline:auto;padding-inline:clamp(20px,5vw,64px)}
.col{max-width:68ch}
.col-large{max-width:78ch}

/* ---------- Navigation ---------- */
.nav{background:var(--encre);color:var(--encre-inv)}
.nav .page{display:flex;align-items:center;gap:var(--e4) var(--e5);padding-block:var(--e4);flex-wrap:wrap}
.mq{display:flex;align-items:center;gap:var(--e3);margin-right:auto;text-decoration:none}
.mq svg{width:26px;height:26px;flex:none}
.mq b{font-size:var(--h4);font-weight:700;letter-spacing:-.01em;color:var(--encre-inv)}
.nav a:not(.mq){font-size:var(--label);font-weight:500;text-decoration:none;color:var(--sur-sombre)}
.nav a:not(.mq):hover{color:var(--encre-inv);text-decoration:underline}
.nav a[aria-current="page"]{color:var(--encre-inv);text-decoration:underline}
.nav a.cta{color:var(--accent-clair);font-weight:600}
.nav a.cta:hover{color:var(--accent-tres-clair)}

/* ---------- Hero de l'accueil, portrait en fond ----------
   La photo est toujours une couche de fond, le texte se pose par-dessus.
   Sous 1100 px elle occupe une bande haute, pleine largeur, qui se fond dans
   l'encre, et le texte démarre sur son bas. À partir de 1100 px elle couvre
   tout le hero, le texte s'écrit sur la moitié gauche assombrie et le visage
   reste dans la zone laissée claire. Les valeurs d'object-position sont
   calculées pour que la tête ne soit jamais rognée, du petit mobile à
   l'écran très large, y compris en fenêtre basse. */
.hero{position:relative;isolation:isolate;background:var(--encre);color:var(--encre-inv);
  --bande:clamp(300px,46vh,460px);--cadrage:68% 50%}
.hero-fond{position:absolute;top:0;left:0;right:0;height:var(--bande);z-index:0}
.hero-fond img{width:100%;height:100%;object-fit:cover;object-position:var(--cadrage)}
.hero-fond::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,
  rgba(25,29,36,.18),rgba(25,29,36,.06) 28%,rgba(25,29,36,.5) 70%,var(--encre) 99%)}
.hero>.page{position:relative;z-index:1}
.hero-texte{padding-top:calc(var(--bande) - var(--e5));padding-bottom:clamp(var(--e8),8vw,var(--e10))}
.hero h1{font-size:var(--hero);font-weight:700;line-height:1.1;letter-spacing:-.02em;max-width:18ch}
.hero .sous{font-size:var(--chapo);color:var(--sur-sombre);margin-top:var(--e6);max-width:52ch;line-height:1.5}
.hero .sign{margin-top:var(--e7);font-size:var(--label);color:var(--sur-sombre-2);max-width:52ch}
.hero .sign b{color:var(--encre-inv);font-weight:600}

@media(min-width:1100px){
  .hero{display:grid;align-items:center;min-height:max(clamp(480px,62vh,720px),19vw)}
  .hero>.page{width:100%}
  .hero-fond{inset:0;height:auto}
  .hero-fond::after{background:
    linear-gradient(90deg,rgba(25,29,36,.93) 0%,rgba(25,29,36,.87) 38%,rgba(25,29,36,.62) 52%,rgba(25,29,36,.22) 66%,rgba(25,29,36,0) 76%),
    linear-gradient(180deg,rgba(25,29,36,.45),rgba(25,29,36,0) 45%,rgba(25,29,36,.35))}
  .hero-texte{max-width:min(54ch,56%);padding-block:clamp(var(--e8),7vw,var(--e9))}
}

/* Hero des pages intérieures : même dispositif que l'accueil, titre au calibre
   des pages secondaires. Le cadrage dépend de la photo, la tête du sujet de
   celle du cabinet frôle le bord haut, d'où un ancrage vertical très haut. */
.hero-interieur h1{font-size:var(--h1);line-height:1.12;max-width:20ch}
.hero-interieur .sous{max-width:58ch}
.hero-cabinet{--cadrage:92% 0}
.hero-contact{--cadrage:50% 50%}

.hero-court{background:var(--encre);color:var(--encre-inv);padding-block:clamp(var(--e8),7vw,var(--e9))}
.hero-court h1{font-size:var(--h1);font-weight:700;line-height:1.12;letter-spacing:-.02em}
.hero-court .sous{font-size:var(--chapo);color:var(--sur-sombre);margin-top:var(--e5);max-width:58ch;line-height:1.5}

/* ---------- Sections ---------- */
section{padding-block:clamp(var(--e8),7vw,var(--e10))}
.blanc{background:var(--surface)}
.clair{background:var(--fond)}
.alt{background:var(--surface-alt)}
.sombre{background:var(--encre);color:var(--encre-inv)}
.sombre .intro,.sombre .d{color:var(--sur-sombre)}
.sombre h2,.sombre h3{color:var(--encre-inv)}
.sombre a{color:var(--accent-clair)}
.sombre a:hover{color:var(--accent-tres-clair)}

/* Fond photographique d'une section sombre : l'image passe sous un voile
   d'encre dont l'opacité règle sa présence. Le texte reste sur l'encre. */
/* le fond est fixé au cadre de la fenêtre, comme celui des scènes qu'elle
   contient : sans cela les marges latérales montreraient un autre cadrage */
.fond-etabli{background-image:
  linear-gradient(rgba(25,29,36,.75),rgba(25,29,36,.75)),
  url('../photos/fond-etabli.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-attachment:fixed}

h2{font-size:var(--h2);font-weight:700;line-height:1.2;letter-spacing:-.015em}
h3{font-size:var(--h3);font-weight:600;line-height:1.25;letter-spacing:-.01em}
h4{font-size:var(--h4);font-weight:600;line-height:1.3}
.intro{color:var(--encre-2);margin-top:var(--e5);font-size:var(--chapo);line-height:1.5}
.texte{max-width:68ch;margin-top:var(--e6)}

/* ---------- Chaîne d'intervention ----------
   Chaque terrain est une ligne : vignette carrée à gauche, texte à droite.
   La colonne image suit la largeur de l'écran, de 84 px sur mobile à 180 px,
   la structure reste la même à toutes les tailles. */
/* ---------- Les sept terrains de l'accueil ----------
   Un fil vertical passe derrière les vignettes et les relie, il se trace au
   défilement, et chaque photo glisse dans son cadre. */
.terrains{--vignette:clamp(56px,6vw,72px);
  list-style:none;margin:var(--e8) 0 0;padding:0;max-width:1000px;position:relative}
.terrains::before,.terrains::after{content:"";position:absolute;
  top:var(--e5);bottom:var(--e5);left:calc(var(--vignette) / 2 - 1px);width:2px}
.terrains::before{background:rgba(25,29,36,.12)}
.terrains::after{background:var(--accent);transform-origin:top center}
.sombre .terrains::before{background:var(--filet-sombre)}
.sombre .terrains::after{background:var(--accent-clair)}
.terrains>li{margin-bottom:0;display:grid;grid-template-columns:var(--vignette) 1fr;
  gap:clamp(var(--e4),3vw,var(--e6));align-items:start}

/* À partir de 900 px le fil passe au centre : les vignettes restent posées
   dessus et c'est le texte qui alterne, à droite pour les terrains impairs,
   à gauche pour les pairs. */
@media(min-width:900px){
  /* toutes les cases prennent la hauteur de la plus haute, ce qui met les
     pastilles à intervalle constant, et le contenu se centre dans sa case */
  .terrains{max-width:none;display:grid;grid-auto-rows:1fr}
  .terrains::before,.terrains::after{left:calc(50% - 1px)}
  .terrains>li{grid-template-columns:1fr var(--vignette) 1fr;
    gap:clamp(var(--e5),3vw,var(--e7));align-items:center}
  /* la rangée est imposée : sans elle, un bloc placé en colonne 1 après une
     vignette placée en colonne 2 partirait à la ligne suivante */
  .terrains .etape-icone{grid-column:2;grid-row:1}
  .terrains>li>div{grid-column:3;grid-row:1;max-width:56ch}
  .terrains>li:nth-child(even)>div{grid-column:1;justify-self:end}
}
/* Pastille posée sur le fil : l'icône reprend l'objet photographié sur la
   page « Ce que je fais », l'accueil annonce et la page détaillée montre. */
.etape-icone{width:var(--vignette);height:var(--vignette);border-radius:50%;
  display:grid;place-items:center;position:relative;z-index:1;
  background:var(--surface);border:1px solid var(--accent-doux);color:var(--accent)}
.etape-icone svg{width:46%;height:46%}
.sombre .etape-icone{background:var(--encre);border-color:var(--filet-sombre);color:var(--accent-clair)}

.etape{padding-block:var(--e5);border-bottom:1px solid rgba(25,29,36,.12)}
.etape:first-child{border-top:1px solid rgba(25,29,36,.12)}
.sombre .etape,.sombre .etape:first-child{border-color:var(--filet-sombre)}
.etape .t{font-size:var(--h4);font-weight:600;letter-spacing:-.01em;display:flex;align-items:baseline;gap:var(--e3)}
.etape .t em{font-style:normal;font-size:var(--micro);font-weight:600;color:var(--accent);flex:none}
.sombre .etape .t em{color:var(--accent-clair)}
.etape .d{color:var(--encre-2);margin:var(--e2) 0 0;max-width:58ch}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .terrains::after{animation:frise-remplir linear both;
      animation-timeline:view();animation-range:entry 70% exit 30%}
    /* l'icône s'allume au passage du trait. La tête du trait traverse le
       milieu de l'écran à mi-parcours de la liste : on cale donc la bascule
       sur le moment où l'icône passe ce même milieu. */
    .etape-icone{animation:icone-allumer linear both;
      animation-timeline:view();animation-range:cover 46% cover 54%}
  }
}
@keyframes icone-allumer{
  from{color:color-mix(in srgb,var(--encre-2) 28%,var(--surface));border-color:var(--filet)}
  to{color:var(--accent);border-color:var(--accent-doux)}}

/* ---------- Séquence de scènes ----------
   Chaque bloc reste collé à l'écran pendant que sa scène défile : l'œil ne
   suit aucun mouvement vertical, ce sont les blocs qui se remplacent. Sous
   900 px la scène redevient un bloc empilé, sans collage : sur mobile la
   hauteur d'écran est instable et le procédé y devient inconfortable. */
.sequence{list-style:none;margin:var(--e8) 0 0;padding:0}
.sequence>li{margin-bottom:0}
.scene{padding-block:var(--e6)}
.scene-fixe{display:grid;gap:var(--e5);align-items:center}
.scene-enseigne{font-size:clamp(56px,12vw,180px);font-weight:700;line-height:.85;
  letter-spacing:-.05em;color:var(--accent);opacity:.28}
.sombre .scene-enseigne{color:var(--accent-clair);opacity:.5}
.scene-dit h3{font-size:var(--h3);margin-bottom:var(--e3)}
.scene-dit p{color:var(--encre-2);max-width:54ch}
.scene-dit p:last-child{margin-bottom:0}
.sombre .scene-dit p{color:var(--sur-sombre)}

@media(min-width:900px){
  .scene{min-height:128vh;padding-block:0}
  /* le bloc occupe l'écran entier et porte le fond de la section : la scène
     suivante recouvre la précédente au lieu d'apparaître sous elle */
  .scene-fixe{position:sticky;top:0;height:100vh;background:var(--surface);
    align-content:center;grid-template-columns:1fr 1.35fr;
    gap:clamp(var(--e8),6vw,var(--e10));padding-block:var(--e8)}
  .sombre .scene-fixe{background:var(--encre)}
  .clair .scene-fixe{background:var(--fond)}
  /* section à fond photographique : chaque scène reprend le même fond, fixé
     au cadre de la fenêtre, pour que le recouvrement ne se voie pas */
  .fond-etabli .scene-fixe{background-image:
    linear-gradient(rgba(25,29,36,.75),rgba(25,29,36,.75)),url('../photos/fond-etabli.jpg');
    background-size:cover;background-position:center;background-attachment:fixed}
  .scene:nth-child(even) .scene-enseigne{order:2;justify-self:end}
  .scene:nth-child(even) .scene-dit{order:1}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* la mesure est prise sur la scène, qui défile, et non sur le bloc collé,
       qui lui ne bouge pas par rapport à l'écran */
    .scene{view-timeline:--scene block}
    /* le contenu se pose pendant que la scène arrive ; pas de disparition,
       c'est la scène suivante qui vient la couvrir */
    .scene-dit,.scene-enseigne{animation:scene-poser linear both;
      animation-timeline:--scene;animation-range:entry 30% contain 12%}
    .scene-enseigne{animation-name:enseigne-poser}
  }
}
/* l'enseigne glisse seulement : son opacité dépend du fond de la section,
   l'animer forcerait une valeur unique */
@keyframes enseigne-poser{from{translate:0 34px}to{translate:0 0}}
@keyframes scene-poser{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

/* ---------- Cartes ---------- */
.grille-3{display:grid;gap:var(--e5);margin-top:var(--e8)}
@media(min-width:900px){.grille-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grille-2{display:grid;gap:var(--e5);margin-top:var(--e8)}
/* une grille qui ouvre une section n'a pas de titre à espacer */
.page>.grille-2:first-child{margin-top:0}
@media(min-width:900px){.grille-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.carte{background:var(--surface);padding:var(--e6);border-radius:2px;min-width:0;display:flex;flex-direction:column}
.sombre .carte{background:var(--sombre-2)}
.sombre .carte p{color:var(--sur-sombre)}
.carte h3{font-size:var(--h4);margin-bottom:var(--e4)}
.carte p{margin-bottom:var(--e3)}
.carte p:last-child{margin-bottom:0}
.carte .note{margin-top:auto;padding-top:var(--e4);font-size:var(--label);color:var(--encre-2)}
.sombre .carte .note{color:var(--sur-sombre-2)}
.carte.majeure{outline:2px solid var(--accent);outline-offset:-2px}
.sombre .carte.majeure{outline-color:var(--accent-clair)}

/* ---------- Preuves ---------- */
.preuve{background:var(--surface);padding:var(--e6);border-radius:2px;min-width:0}
.preuve.large{grid-column:1/-1}
/* ---------- Frise des terrains ----------
   Une ligne verticale porte les sept jalons. Sous 900 px la ligne longe le
   bord gauche et les blocs se suivent ; au-delà elle passe au centre et les
   blocs alternent de part et d'autre. Le séquencement se lit au défilement :
   la ligne se remplit, chaque bloc entre depuis son côté, et sa photo glisse
   légèrement dans son cadre. Tout est en CSS, aucune animation n'est requise
   pour lire la page : sans prise en charge, ou si le visiteur demande moins
   d'animations, la frise s'affiche simplement, complète et fixe. */
.frise{--rail:11px;--pastille:34px;
  list-style:none;margin:var(--e8) 0 0;padding:0;position:relative}
.frise::before,.frise::after{content:"";position:absolute;top:0;bottom:0;
  left:var(--rail);width:2px;border-radius:2px}
.frise::before{background:var(--filet)}
/* pleine par défaut : si les animations ne s'appliquent pas, la ligne est
   simplement tracée en entier plutôt que de rester invisible */
.frise::after{background:var(--accent);transform-origin:top center}

.jalon{position:relative;padding-left:calc(var(--rail) + var(--e6));
  padding-block:0 var(--e9)}
.jalon:last-child{padding-bottom:0}
/* la pastille passe devant la ligne, qui est peinte après les jalons */
.jalon-point{position:absolute;left:0;top:0;z-index:1;
  width:var(--pastille);height:var(--pastille);
  transform:translateX(calc(-1 * var(--pastille) / 2 + 1px));
  display:grid;place-items:center;border-radius:50%;
  background:var(--surface);border:2px solid var(--filet);
  font-size:var(--micro);font-weight:600;color:var(--encre-2)}
.jalon-carte{background:var(--surface);min-width:0}
.jalon-vue{margin:0 0 var(--e5);overflow:hidden;border-radius:2px}
.jalon-vue img{width:100%;aspect-ratio:3/2;object-fit:cover}
.jalon h3{font-size:var(--h3);margin-bottom:var(--e3)}
.jalon p{color:var(--encre-2);max-width:62ch}
.jalon p:last-child{margin-bottom:0}

@media(min-width:900px){
  /* la vue d'un côté du fil, le texte de l'autre, et les deux échangent de
     place à chaque terrain. Le fil passe dans la gouttière centrale. */
  .frise{--rail:50%}
  .frise::before,.frise::after{transform:translateX(-1px)}
  .jalon{display:grid;grid-template-columns:1fr 1fr;
    column-gap:calc(var(--pastille) + 2 * var(--e7));
    padding-left:0;padding-bottom:var(--e9)}
  .jalon-point{left:50%}
  .jalon-vue{grid-column:1;grid-row:1;margin:0}
  .jalon-carte{grid-column:2;grid-row:1}
  .jalon:nth-child(even) .jalon-vue{grid-column:2}
  .jalon:nth-child(even) .jalon-carte{grid-column:1}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .frise::after{animation:frise-remplir linear both;
      animation-timeline:view();animation-range:entry 60% exit 40%}
    .jalon-carte{animation:jalon-entrer linear both;
      animation-timeline:view();animation-range:entry 15% cover 32%}
    /* le premier bloc est déjà à l'écran au chargement : il finit d'apparaître
       plus tôt, sinon il s'affiche à demi pâle sans qu'on ait rien fait */
    .jalon:first-child .jalon-carte{animation-range:entry 0% entry 50%}
    .jalon:nth-child(even) .jalon-carte{animation-name:jalon-entrer-droite}
    .jalon-point{animation:point-actif linear both;
      animation-timeline:view();animation-range:entry 40% cover 30%}
    /* le cadre porte la mesure : son overflow:hidden en fait un conteneur de
       défilement, donc une vue prise depuis l'image resterait figée */
    .jalon-vue{view-timeline:--vue-jalon block}
    .jalon-vue img{scale:1.12;animation:vue-glisser linear both;
      animation-timeline:--vue-jalon;animation-range:cover 0% cover 100%}
  }
}
@keyframes frise-remplir{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(min-width:900px){@keyframes frise-remplir{
  from{transform:translateX(-1px) scaleY(0)}to{transform:translateX(-1px) scaleY(1)}}}
@keyframes jalon-entrer{from{opacity:0;transform:translate3d(-28px,12px,0)}to{opacity:1;transform:none}}
@keyframes jalon-entrer-droite{from{opacity:0;transform:translate3d(28px,12px,0)}to{opacity:1;transform:none}}
@keyframes point-actif{to{border-color:var(--accent);background:var(--accent);color:var(--encre-inv)}}
@keyframes vue-glisser{from{translate:0 -4%}to{translate:0 4%}}

/* En-tête d'une carte de preuve : la vue en bandeau, le titre dessous. */
.preuve.large p{max-width:74ch}
/* petite vue en tête d'une référence : elle situe, elle n'illustre pas */
.preuve-vue{margin:0 0 var(--e5);max-width:340px}
.preuve-vue img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px;border:1px solid var(--filet)}
.preuve-photo{margin:0 0 var(--e5)}
.preuve-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
.preuve h3{font-size:var(--h4);margin-bottom:var(--e3)}
.preuve p{color:var(--encre-2);margin-bottom:var(--e3)}
.preuve p:last-child{margin-bottom:0}

/* ---------- Parcours ---------- */

/* ---------- Boutons ---------- */
.bouton{display:inline-block;padding:var(--e4) var(--e6);background:var(--accent);color:#fff;
  text-decoration:none;font-weight:600;font-size:var(--label);border-radius:2px;min-height:44px}
.bouton:hover{background:var(--accent-h);color:#fff}
.bouton-2{display:inline-block;padding:var(--e4) var(--e6);background:transparent;color:var(--accent);
  border:1px solid var(--accent);text-decoration:none;font-weight:600;font-size:var(--label);border-radius:2px;min-height:44px}
.bouton-2:hover{background:var(--accent-doux);color:var(--accent-h)}
.sombre .bouton-2{color:var(--accent-clair);border-color:var(--accent-clair)}
.sombre .bouton-2:hover{background:var(--sombre-2);color:var(--accent-tres-clair)}

/* ---------- Contact ---------- */
.contact-grille{display:grid;gap:var(--e7);margin-top:var(--e7);align-items:start}
@media(min-width:860px){.contact-grille{grid-template-columns:1.3fr 1fr;gap:var(--e9)}}
.coord{font-size:var(--label);background:var(--surface);padding:var(--e6);border-radius:2px}
.coord div{margin-bottom:var(--e4)}
.coord div:last-child{margin-bottom:0}
.coord span{display:block;color:var(--encre-2);font-size:var(--micro);margin-bottom:2px}
.portrait{width:120px;border-radius:2px;filter:grayscale(1);margin-bottom:var(--e5)}

/* ---------- Ce que je construis ---------- */
/* Carte d'outil publié : la vue de l'outil en tête, et toute la carte
   cliquable via le lien de l'adresse, qui reste le seul lien du bloc. */
.construit{position:relative;background:var(--surface);padding:var(--e6);border-radius:2px;min-width:0}
.construit-vue{margin:0 0 var(--e5)}
.construit-vue img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;
  border:1px solid var(--filet);border-radius:2px;transition:border-color .15s}
.construit .adr a::after{content:"";position:absolute;inset:0}
.construit:hover h3{text-decoration:underline;text-underline-offset:3px}
.construit:hover .construit-vue img{border-color:var(--accent)}
.construit h3{font-size:var(--h4);margin-bottom:var(--e2)}
.construit .adr{font-size:var(--micro);color:var(--accent);margin-bottom:var(--e3);overflow-wrap:anywhere}
.construit p{color:var(--encre-2);font-size:var(--label);margin-bottom:0}

/* ---------- Pages légales, texte long ---------- */
.legal{background:var(--surface)}
.legal .col{margin-top:var(--e6)}
.legal h2{font-size:var(--h3);margin-top:var(--e7);margin-bottom:var(--e4);max-width:none}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:var(--h4);margin-top:var(--e5);margin-bottom:var(--e3)}
.legal dl{margin:0 0 var(--e5)}
.legal dt{font-weight:600;margin-top:var(--e3)}
.legal dd{margin:0 0 var(--e2)}

/* ---------- Tableaux ---------- */
.tableau-cadre{overflow-x:auto;margin-block:var(--e5);background:var(--surface);border-radius:2px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--label)}
th,td{text-align:left;padding:var(--e4) var(--e5);vertical-align:top}
thead th{font-weight:600;border-bottom:1px solid var(--encre);white-space:nowrap}
tbody tr+tr td{border-top:1px solid var(--filet)}

/* ---------- Pied de page ---------- */
footer{background:var(--encre);color:var(--sur-sombre-2);padding-block:var(--e8);font-size:var(--micro)}
/* le filet sépare les liens des mentions, sur toute la largeur du conteneur */
footer .liens{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);
  padding-bottom:var(--e5);margin-bottom:var(--e5);border-bottom:1px solid var(--filet-sombre)}
footer a{color:var(--sur-sombre)}
footer a:hover{color:var(--encre-inv)}
footer p{margin-bottom:var(--e3);max-width:88ch}
footer p:last-child{margin-bottom:0}
.credits{margin-top:var(--e5)}

/* deux colonnes dès qu'il y a la place : mentions à gauche, crédits à droite */
@media(min-width:1200px){
  footer .page{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--e8)}
  footer .liens{grid-column:1/-1}
  footer p{max-width:none;margin-bottom:0}
  footer p:not(.credits){grid-column:1;grid-row:2}
  footer .credits{grid-column:2;grid-row:2;margin-top:0}
}

/* ---------- Divers ---------- */
/* encadré d'appel : pleine largeur de la grille qui le précède */
.appel{background:var(--accent-doux);padding:var(--e5) var(--e6);border-radius:2px;margin-top:var(--e6)}
.appel p:last-child{margin-bottom:0}
.centre-cta{margin-top:var(--e8);display:flex;flex-wrap:wrap;gap:var(--e4)}
.dates{font-size:var(--micro);color:var(--encre-2);margin-top:var(--e6)}
.sombre .dates{color:var(--sur-sombre-2)}

/* ---------- Utilitaires ----------
   Ils existent pour qu'aucun attribut style ne subsiste dans le HTML :
   la politique de sécurité du .htaccess interdit les styles en ligne. */
.u-aligne-haut{align-items:start}
.u-mt-7{margin-top:var(--e7)}
.u-mt-0{margin-top:0}
.u-sur-sombre{color:var(--sur-sombre)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}