/* ============================================================
   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:100% 69%}
.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;max-width:20ch}
.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 .kicker{color:var(--accent-clair)}
.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. */
.fond-ombres{background-image:
  linear-gradient(rgba(25,29,36,.82),rgba(25,29,36,.82)),
  url('../photos/ombres-feuillage.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat}

.kicker{font-size:var(--micro);font-weight:600;color:var(--accent);margin:0 0 var(--e3)}
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);max-width:60ch;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. */
.terrains{list-style:none;margin:var(--e8) 0 0;padding:0;max-width:1000px}
.terrains>li{margin-bottom:0;display:grid;grid-template-columns:clamp(84px,13vw,150px) 1fr;
  gap:clamp(var(--e4),3vw,var(--e6));align-items:start}
.terrains figure{margin:0}
.terrains img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px}

.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}

/* ---------- 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)}
@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}
.preuve-tete{display:flex;align-items:center;gap:var(--e4);margin-bottom:var(--e4)}
.preuve-tete img{width:clamp(64px,9vw,88px);aspect-ratio:1/1;object-fit:cover;border-radius:2px;flex:none}
.preuve-tete h3{margin-bottom:0}
.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)}
footer .liens{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);margin-bottom:var(--e5)}
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);padding-top:var(--e4);border-top:1px solid var(--filet-sombre)}

/* ---------- Divers ---------- */
.appel{background:var(--accent-doux);padding:var(--e5) var(--e6);border-radius:2px;margin-top:var(--e6);max-width:74ch}
.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}}

/* ============================================================
   Ajout propre au sous-domaine fabriqueia.solicare.fr.
   Rien n'est modifié au-dessus : la feuille de solicare.fr est
   reprise à l'identique, seul ce bloc s'y ajoute.
   ============================================================ */

/* Marque du sous-domaine : le nom du service suit celui du cabinet. */
.mq .service{font-size:var(--label);font-weight:500;color:var(--sur-sombre)}
.mq .service::before{content:"\00b7";margin-inline:var(--e2);color:var(--sur-sombre-2)}

/* La signature existe sous le hero de l'accueil du cabinet, il lui
   fallait sa version sur le hero court, seul utilisé ici. */
.hero-court .sign{margin-top:var(--e6);font-size:var(--label);color:var(--sur-sombre-2);max-width:56ch}
.hero-court .sign b{color:var(--encre-inv);font-weight:600}

/* Liste sans puce ni vignette : c'est .terrains privé de sa colonne
   d'image, pour les suites d'étapes qui n'ont pas de photo. */
.liste-nue{list-style:none;margin:var(--e8) 0 0;padding:0;max-width:1000px}
.liste-nue>li{margin-bottom:0}

/* Hero de l'accueil : même mécanique que .fond-ombres, avec la photo
   claire de la lumière dans le feuillage. Le voile d'encre ramène le
   contraste au niveau des autres fonds sombres du cabinet. */
.fond-lumiere{background-image:
  linear-gradient(rgba(25,29,36,.86),rgba(25,29,36,.86)),
  url('../photos/lumiere-foret.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat}

/* L'encadré d'appel existe en clair, il lui fallait sa version sombre. */
.sombre .appel{background:var(--sombre-2)}
.sombre .appel p{color:var(--sur-sombre)}

/* Vignette carrée posée à côté d'un texte, même grille que .terrains
   mais sur un bloc isolé plutôt que sur une liste. */
.avec-vignette{display:grid;grid-template-columns:clamp(84px,13vw,150px) 1fr;
  gap:clamp(var(--e4),3vw,var(--e6));align-items:start;margin-top:var(--e7)}
.avec-vignette figure{margin:0}
.avec-vignette img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px}
.avec-vignette>div>:last-child{margin-bottom:0}