@font-face{font-family:"Space Grotesk";src:url("/assets/space-grotesk.0640890476.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/inter.3100e775e8.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/jetbrains-mono.18be452724.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
/* Site BH CONSULTING : mise en page de la Maquette 1, choisie par Samuel le 20/10.
   Couleurs, 21/10 : « trop creme blanc casse », puis « pas le bleu […] je t'ai pas dis
   d'enlever cette couleure, tu peux en rajouter d'autres », puis « enlève le vert ». Le crème
   de la Maquette 1 reste la base de toutes les palettes ; une deuxième couleur prend l'en-tête,
   l'ouverture, la méthode, l'appel et le pied, et sa teinte claire une section sur deux
   (classe .teinte). Choix dans site.config.json (reglages.palette), posé en data-palette.
   Couleurs : ui-ux-pro-max colors.csv n° 33 « Premium black + gold accent » (creme-noir, par
   défaut : noir #1C1917, or #CA8A04 sur le noir, bordure #D6D3D1 mêlée au crème pour la
   teinte), n° 63 « Warm brown + cream white » (creme-chocolat : #78350F, #92400E, #FDE68A),
   n° 97 « Warm terracotta » et n° 64 (creme-terracotta), n° 15 et n° 28 (creme-bordeaux,
   #881337), et la Maquette 1 telle quelle (creme). L'or #A16207 du n° 33 ne fait que 4,3:1
   sur le crème : le texte doré sur fond clair garde l'ocre #8C4F06 de la Maquette 1.
   Contrastes vérifiés : 4,6:1 au moins en petit texte, 3:1 au moins pour les traits de champ.
   26/10 : les 14 directions rejetées (« tout est moche »), Samuel coche 5 vrais sites
   (vanmotion, cominvi, white-desert, moto-finance, Cartier). Palette nuit-orange tirée de
   leurs captures : fond presque noir, sections claires en relais, orange vif en touche rare.
   Polices lues dans site.config.json (typographie.titre, .corps, .mono) : grotesque pour les
   titres, mono en majuscules espacées pour les surtitres et les métadonnées, comme vanmotion.
   La classe .sombre fait passer un bloc sur les couleurs de nuit de sa palette.
   Écrire « } } » et jamais deux accolades fermantes collées : build.py les refuse. */

:root{
  --mesure:1320px;
  --marge:clamp(16px,4vw,56px);
  --bord:max(var(--marge), calc((100% - var(--mesure)) / 2));
  --titre:"Space Grotesk",system-ui,sans-serif;
  --texte:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

/* Palettes. Base commune : le crème de la Maquette 1. creme-noir sert aussi de valeur par défaut. */
:root,[data-palette]{
  --fond:#f3efe8;--fond-2:#e9e3d8;--clair:#faf7f2;--encre:#2a2622;--doux:#615a52;
  --trait:rgba(42,38,34,.16);--trait-fort:#8a8076;--erreur:#8c4f06;
  --sur-nuit:#f3efe8;--trait-nuit:rgba(243,239,232,.18);
}
:root,[data-palette="creme-noir"]{
  --ocre:#8c4f06;--teinte:#e6e2de;
  --nuit:#1c1917;--nuit-2:#2a2724;--sur-nuit-doux:#c4c0ba;--ambre:#ca8a04;
  --ombre:#1c1917;--cadre:#1c1917;
}
[data-palette="creme-chocolat"]{
  --ocre:#92400e;--teinte:#eadfd4;
  --nuit:#78350f;--nuit-2:#81390f;--sur-nuit-doux:#d8c6b8;--ambre:#fde68a;
  --ombre:#78350f;--cadre:#78350f;
}
[data-palette="creme-terracotta"]{
  --ocre:#9a3412;--teinte:#eeded2;
  --nuit:#7c2d12;--nuit-2:#853c23;--sur-nuit-doux:#e3c3b2;--ambre:#fbbf24;
  --ombre:#7c2d12;--cadre:#7c2d12;
}
[data-palette="creme-bordeaux"]{
  --ocre:#881337;--teinte:#eaddda;
  --nuit:#881337;--nuit-2:#902445;--sur-nuit-doux:#e6bfc8;--ambre:#fbbf24;
  --ombre:#881337;--cadre:#881337;
}
[data-palette="creme"]{
  --ocre:#8c4f06;--teinte:#f3efe8;
  --nuit:#24201c;--nuit-2:#33302c;--sur-nuit:#efe8dc;--sur-nuit-doux:#bdb3a5;--ambre:#d9a35b;
  --trait-nuit:rgba(239,232,220,.18);
  --ombre:#2a2622;--cadre:#2a2622;
}
/* Nuit et orange, 26/10 : tout le site sur le noir, et non plus seulement l'en-tête et l'ouverture.
   Contrastes : encre 16,6:1, doux 7,6:1, orange 6,8:1 sur le fond ; trait de champ 3,5:1. */
[data-palette="nuit-orange"]{
  --fond:#0d0c0b;--fond-2:#171513;--clair:#1c1a17;--encre:#f1ece4;--doux:#a8a097;
  --trait:rgba(241,236,228,.14);--trait-fort:#6f675e;--erreur:#ffb27a;
  --ocre:#ff6a1a;--teinte:#ece6dc;
  --nuit:#0d0c0b;--nuit-2:#171513;--sur-nuit:#f1ece4;--sur-nuit-doux:#a8a097;--ambre:#ff6a1a;
  --trait-nuit:rgba(241,236,228,.14);
  --ombre:#000;--cadre:#2a2724;
}
/* Le relais clair (white-desert, cominvi) : les sections .teinte repassent en clair, orange foncé
   pour garder 5,2:1 sur le crème (l'orange vif n'y fait que 2,3:1). */
[data-palette="nuit-orange"] section.teinte{
  --fond:#ece6dc;--fond-2:#e2dbcf;--clair:#f6f2ec;--encre:#1a1816;--doux:#5a534b;
  --trait:rgba(26,24,22,.16);--trait-fort:#857b70;--erreur:#9a3a06;--ocre:#a33f06;
  color:var(--encre);
}
/* L'entrée des pages intérieures reste dans le noir, comme l'ouverture de l'accueil. */
[data-palette="nuit-orange"] .entree{background:var(--fond)}

/* Blocs de nuit : la méthode, le bandeau d'appel, le pied ; hors palette « creme », l'en-tête
   et l'ouverture aussi. Sélecteurs sur [data-palette] et pas sur la racine html seule : l'éditeur pose
   la palette sur un bloc. */
.sombre,[data-palette]:not([data-palette="creme"]) :is(.heros,.entete){
  --fond:var(--nuit);--fond-2:var(--nuit-2);--clair:var(--nuit-2);--encre:var(--sur-nuit);
  --doux:var(--sur-nuit-doux);--ocre:var(--ambre);--trait:var(--trait-nuit);
  color:var(--encre);
}
.sombre,[data-palette]:not([data-palette="creme"]) .heros{background:var(--fond)}
[data-palette]:not([data-palette="creme"]) .heros{padding-bottom:clamp(40px,6vw,72px)}

/* Teinte claire de la deuxième couleur : l'entrée des pages intérieures, une section sur deux. */
/* section.teinte et pas .teinte : la règle commune des sections (padding:… 0), écrite plus bas, l'emporterait. */
section.teinte{background:var(--teinte);padding-bottom:clamp(80px,10vw,140px)}
/* Pas de bande crème entre une teinte et un bloc de nuit qui la suit. */
.teinte + .bandeau-appel,.entree + .methode{margin-top:0}
/* Les sections ordinaires finissent sans marge basse : de l'air avant la teinte qui les suit. */
section:not(.teinte,.sombre,.heros) + section.teinte{margin-top:clamp(80px,10vw,140px)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:104px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth} }
body{margin:0;background:var(--fond);color:var(--encre);font:400 17px/1.6 var(--texte)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--ocre);outline-offset:3px}

.evitement{position:absolute;left:16px;top:-120px;z-index:100;padding:10px 16px;background:var(--encre);color:var(--fond);font-weight:600;text-decoration:none}
.evitement:focus{top:16px}

/* En-tête */
.entete{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px var(--bord);
  background:color-mix(in srgb,var(--fond) 72%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--trait);
}
/* Menu en mono majuscules (vanmotion), la page en cours dans une pilule bordée (moto-finance). */
.menu{display:flex;gap:2px}
.menu a{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border:1px solid transparent;border-radius:999px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:color .2s ease,border-color .2s ease}
.menu a:hover{color:var(--ocre)}
.menu a[aria-current=page]{border-color:var(--trait-fort)}
.entete-actions{display:flex;align-items:center;gap:12px}
.langue{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  min-width:44px;min-height:44px;padding:0 12px;
  font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--encre);
  background:transparent;border:1px solid var(--trait);border-radius:999px;cursor:pointer;
}
.langue:hover{border-color:var(--encre)}

.pilule{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:12px 22px;border:0;border-radius:999px;
  background:var(--encre);color:var(--fond);
  font:600 15px/1.2 var(--texte);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s ease;
}
.pilule:hover,.pilule[aria-current=page]{background:var(--ocre)}
.pilule svg{width:16px;height:16px;transition:transform .2s ease}
.pilule:hover svg{transform:translateX(3px)}
.pilule.grande{padding:16px 28px;font-size:16px}

.menu-mobile{display:none;position:relative}
.menu-mobile summary{
  display:flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid var(--encre);border-radius:999px;
  font-weight:600;font-size:15px;cursor:pointer;list-style:none;
}
.menu-mobile summary::-webkit-details-marker{display:none}
.menu-mobile nav{
  position:absolute;right:0;top:calc(100% + 10px);width:min(260px,calc(100vw - 32px));
  display:flex;flex-direction:column;padding:8px;
  background:var(--clair);border:1px solid var(--trait);border-radius:14px;
  box-shadow:0 18px 40px color-mix(in srgb,var(--ombre) 18%,transparent);
}
.menu-mobile nav a{padding:12px 14px;font-weight:600;text-decoration:none;border-radius:8px}
.menu-mobile nav a:hover,.menu-mobile nav a[aria-current=page]{background:var(--fond-2)}

/* Logo A1 : B״H, puis CONSULTING et la ligne de sous-titre, comme sur la planche du 20/10.
   Le cadre du dessin est rogné au ras des lettres (viewBox 7 28 90 45) ; les lettres B״H
   font 1,6 fois la hauteur de CONSULTING, la proportion de la planche, pour que les deux
   traits ocre restent lisibles. */
.entete .marque{display:inline-flex;align-items:center;gap:16px;flex:none;position:relative;text-decoration:none;min-height:44px}
.entete .marque svg{width:62px;height:31px;flex:none;overflow:visible}
.l-lettre{font:700 52px var(--titre)}
.l-encre{fill:currentColor}
.l-accent{fill:var(--ocre)}
.marque-nom{display:flex;flex-direction:column;gap:6px}
.marque-mot{font:700 21px/1 var(--titre);letter-spacing:.02em;white-space:nowrap}
.marque-sous{font:500 13px/1 var(--texte);letter-spacing:.04em;color:var(--doux);white-space:nowrap}

/* Ouverture, d'après vanmotion (coché le 26/10) : le titre à gauche, une mosaïque à droite.
   Sa ligne de métadonnées du bas a été retirée le 02/11, à la demande de Samuel. */
.heros{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(40px,5vw,64px) clamp(32px,5vw,80px);align-items:center;
  padding:clamp(32px,5vw,72px) var(--bord) 0;
}
.surtitre{font:500 12px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--doux)}
.heros h1{margin-top:20px;font:600 clamp(40px,4.9vw,78px)/1 var(--titre);letter-spacing:-.04em}
.heros h1 em,.refus-titre em{font-style:normal;color:var(--ocre)}
.cote{margin-top:clamp(24px,3vw,36px)}
.sous{font-size:18px;color:var(--doux);max-width:44ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px}
.appel{font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding:6px 0;position:relative}
/* Zone de toucher portée à 44 px sans bouger le soulignement : le lien visible fait 39 px. */
.appel::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.appel:hover{color:var(--ocre)}
.discret{color:var(--doux);font-weight:400}

/* Mosaïque : la page d'accueil de Beauté d'ange en grand, les captures de sites types
   (reglages.ouverture_sites) dessous. Une seule capture de site type prend toute la largeur.
   La grande capture est en 3/2 et le reste même seule : en portrait, elle perdrait la page. */
.mosaique{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tuile{--rayon:16px;position:relative;display:block;overflow:hidden;border-radius:var(--rayon);background:var(--fond-2)}
.tuile img{width:100%;height:100%;object-fit:cover}
.tuile-photo{grid-column:1 / -1;aspect-ratio:3/2}
.tuile-photo img{object-position:center top}
.tuile-site{aspect-ratio:16/10}
.tuile-site:last-child:nth-child(2){grid-column:1 / -1;aspect-ratio:21/9}
.tuile-site img{object-position:top;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.tuile-site:hover img{transform:scale(1.04)}
.etiquette{
  position:absolute;left:16px;bottom:16px;max-width:calc(100% - 32px);
  padding:7px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--fond) 90%,transparent);color:var(--encre);
  font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
}
.tuile-site .etiquette{left:10px;bottom:10px;max-width:calc(100% - 20px);white-space:nowrap}

@media (prefers-reduced-motion:no-preference){
  .surtitre,.heros h1,.cote{animation:monte .9s cubic-bezier(.2,.7,.1,1) both}
  .heros h1{animation-delay:.08s}
  .cote{animation-delay:.18s}
  .mosaique .tuile{animation:ouvre 1.2s cubic-bezier(.2,.7,.1,1) .2s both}
  .mosaique .tuile:nth-child(2){animation-delay:.32s}
  .mosaique .tuile:nth-child(3){animation-delay:.44s}
}
@keyframes monte{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none} }
@keyframes ouvre{from{clip-path:inset(6% 6% 6% 6% round var(--rayon))}to{clip-path:inset(0 0 0 0 round var(--rayon))} }

/* Rubriques */
.rubrique{
  display:flex;align-items:center;gap:16px;margin-bottom:clamp(32px,4vw,56px);
  font:500 12px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--doux);
}
.rubrique::after{content:"";flex:1;height:1px;background:var(--trait)}
.rubrique .num{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--ocre)}

.accueil-offres,.realisations,.publics,.questions,.fondateur,.contact,.refus,.avis-accueil,.page-avis,.tranche{padding:clamp(80px,10vw,140px) var(--bord) 0}
.entree + .realisations,.entree + .questions,.entree + .page-avis{padding-top:clamp(48px,6vw,88px)}
main > .contact:first-child{padding-top:clamp(56px,8vw,112px)}
.suite{margin-top:40px}

/* Accueil : les trois offres en cartes */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cartes li{display:flex}
.carte{
  display:flex;flex-direction:column;width:100%;padding:clamp(24px,3vw,36px);
  background:var(--clair);border:1px solid var(--trait);border-radius:16px;text-decoration:none;
  transition:border-color .25s ease,box-shadow .25s ease,opacity .8s ease,transform .8s cubic-bezier(.2,.7,.1,1);
}
.carte:hover{border-color:var(--ocre);box-shadow:0 24px 48px -28px color-mix(in srgb,var(--ombre) 45%,transparent)}
.carte-num{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--ocre)}
.carte h3{margin-top:40px;font:600 clamp(26px,2.4vw,34px)/1.1 var(--titre);letter-spacing:-.025em}
.carte p{flex:1;margin-top:14px;color:var(--doux)}
.carte-lien{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-weight:600;color:var(--ocre)}
.carte-lien svg{width:16px;height:16px;transition:transform .2s ease}
.carte:hover .carte-lien svg,.apercu:hover .carte-lien svg{transform:translateX(3px)}
/* La flèche des cartes et des aperçus dans un carré bordé, qui se remplit d'orange au survol (cominvi). */
:is(.carte,.apercu) .carte-lien{gap:14px}
:is(.carte,.apercu) .carte-lien svg{box-sizing:content-box;flex:none;padding:9px;border:1px solid var(--trait-fort);border-radius:10px;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
:is(.carte,.apercu):hover .carte-lien svg{transform:none;background:var(--ocre);border-color:var(--ocre);color:var(--fond)}
/* Réalisations : les sites types par métier, plus nombreux, donc des cartes plus serrées et sans numéro */
.sites-types .carte h3{margin-top:0;font-size:clamp(20px,1.8vw,24px);line-height:1.2}

/* Accueil : aperçu des réalisations */
.apercus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.apercus li{display:flex}
.apercu{display:flex;flex-direction:column;width:100%;text-decoration:none}
.apercu-image{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:16px;background:var(--fond-2)}
.apercu-image img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s ease}
.apercu:hover .apercu-image img{transform:scale(1.03)}
.apercu-logo{display:grid;place-items:center}
.apercu-logo img{width:38%;height:auto;border-radius:8px}
.apercu h3{margin-top:24px;font:600 clamp(28px,3vw,40px)/1.1 var(--titre);letter-spacing:-.03em}
.apercu .cas-desc{flex:1}
.apercu .carte-lien{margin-top:20px}

/* Réalisations */
.cas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,6vw,96px)}
.cas h2,.cas h3,.cas-court h2,.cas-court h3{font:600 clamp(36px,4vw,56px)/1.05 var(--titre);letter-spacing:-.03em}
.cas-desc{margin-top:14px;font-size:17px;color:var(--doux)}
.preuve{display:flex;align-items:center;gap:16px;margin-top:28px;padding-top:20px;border-top:1px solid var(--trait);font-size:15px}
.preuve img{flex:none;width:72px}
/* Le logo de Beauté d'ange est en currentColor : chargé par une balise img, il sort noir, invisible sur la nuit. */
[data-palette="nuit-orange"] .preuve img{filter:invert(.94)}
[data-palette="nuit-orange"] section.teinte .preuve img{filter:none}
/* Même souci pour le logo B2I, rouge foncé sur fond transparent : posé sur une tuile claire, comme sur l'accueil. */
[data-palette="nuit-orange"] .logo-b2i{padding:8px;background:var(--teinte)}
.faits{counter-reset:fait;border-top:1px solid var(--trait)}
.faits li{counter-increment:fait;display:grid;grid-template-columns:44px minmax(0,1fr);padding:14px 0;border-bottom:1px solid var(--trait)}
.faits li::before{content:counter(fait,decimal-leading-zero);font:500 12px/2.2 var(--mono);letter-spacing:.06em;color:var(--ocre)}
.vitrine{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;margin-top:24px}
.vitrine .ecran{grid-column:1 / 11;grid-row:1;width:100%;border-radius:16px;box-shadow:0 30px 60px -20px color-mix(in srgb,var(--ombre) 35%,transparent)}
.vitrine .mobile{grid-column:10 / 12;grid-row:1;align-self:end;width:100%;margin-bottom:-36px;border:7px solid var(--cadre);border-radius:26px;box-shadow:0 24px 48px -16px color-mix(in srgb,var(--ombre) 45%,transparent);position:relative}
.vitrine figcaption{grid-column:1 / -1;grid-row:2;margin-top:64px;font-size:15px;color:var(--doux)}
.vitrine figcaption a{color:var(--ocre);font-weight:600;text-underline-offset:3px}

.cas-court{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);gap:32px clamp(32px,4vw,64px);align-items:start;margin-top:clamp(64px,8vw,112px);padding-top:40px;border-top:1px solid var(--trait)}
.logo-b2i{width:120px;border-radius:16px}
.statut{display:inline-block;margin-bottom:12px;padding:6px 12px;border:1px solid currentColor;border-radius:999px;font:500 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ocre)}
.faits-courts{border-top:1px solid var(--trait)}
.faits-courts li{padding:14px 0;border-bottom:1px solid var(--trait)}
/* Fiche courte avec la capture du site en ligne à la place du logo (Tiphéa). */
.cas-court.cas-capture{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.cas-capture .faits-courts{margin-top:28px}
.capture-site img{width:100%;border-radius:16px;box-shadow:0 30px 60px -20px color-mix(in srgb,var(--ombre) 35%,transparent)}
.capture-site figcaption{margin-top:16px;font-size:15px}
.capture-site figcaption a{color:var(--ocre);font-weight:600;text-underline-offset:3px}
/* Trois réalisations sur l'accueil : trois colonnes, titres un cran plus petits. */
.apercus.apercus-trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.apercus-trois .apercu h3{font-size:clamp(24px,2.2vw,32px)}

/* Pour qui : grandes lignes, la photo s'éclaire au survol */
.lignes{border-top:1px solid var(--trait)}
.ligne{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 150px;gap:24px clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid var(--trait)}
.ligne h3{font:600 clamp(30px,4.2vw,60px)/1.05 var(--titre);letter-spacing:-.03em;transition:color .3s ease,transform .3s ease}
.ligne p{color:var(--doux);max-width:46ch}
.vue{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:12px}
.vue img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.95);transform:scale(1.04);transition:filter .5s ease,transform .5s ease}
.ligne:hover h3{color:var(--ocre);transform:translateX(10px)}
.ligne:hover .vue img{filter:none;transform:scale(1)}

/* Pages d'offre : la liste à gauche, un encart à droite */
.detail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px clamp(40px,6vw,96px);align-items:start;padding:clamp(48px,6vw,88px) var(--bord) 0}
.offres{border-bottom:1px solid var(--trait)}
.offre{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;padding:22px 0;border-top:1px solid var(--trait)}
.offre dt{font:600 21px/1.3 var(--titre);letter-spacing:-.01em}
.offre .prix{color:var(--ocre);font-weight:700;font-size:15px;white-space:nowrap;align-self:center}
.offre .desc{grid-column:1 / -1;color:var(--doux);font-size:16px}
/* Le catalogue chiffré : une ligne par outil, son prix à droite */
.offre .catalogue{grid-column:1 / -1;min-width:0}
.catalogue li{display:flex;justify-content:space-between;align-items:baseline;gap:6px 24px;padding:9px 0;border-top:1px dashed var(--trait);font-size:16px}
.catalogue li:first-child{border-top:0}
.catalogue .nom{min-width:0;color:var(--doux)}
.catalogue .prix{flex:none;color:var(--ocre);font-weight:700;font-size:15px;white-space:nowrap}
/* Outils : les forfaits de maintenance, trois colonnes */
.forfaits{padding:clamp(80px,10vw,140px) var(--bord) 0}
.forfaits .chapo{margin-top:16px}
.forfaits-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.forfait{display:flex;flex-direction:column;min-width:0;padding:clamp(24px,3vw,36px);background:var(--clair);border:1px solid var(--trait);border-radius:16px}
.forfait h3{font:600 clamp(24px,2.2vw,30px)/1.1 var(--titre);letter-spacing:-.02em}
.forfait-prix{margin-top:10px;color:var(--ocre);font-weight:700;font-size:18px}
.forfait-pour{margin-top:14px;color:var(--doux)}
.forfait ul{margin-top:20px;display:grid;gap:8px}
.forfait ul li{position:relative;padding-left:18px;font-size:15px}
.forfait ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--ocre)}
.note{margin-top:24px;padding:14px 20px;border-left:2px solid var(--ocre);background:var(--clair);font-size:15px;font-weight:600}
.exemple{margin-top:32px}
.encart{position:sticky;top:112px;padding:clamp(24px,3vw,36px);background:var(--fond-2);border:1px solid var(--trait);border-radius:16px}
.encart h2{font:600 clamp(22px,2vw,28px)/1.2 var(--titre);letter-spacing:-.02em}
.encart p{margin-top:12px;color:var(--doux)}
.encart .appel{display:inline-block;margin-top:24px}
.encart .pilule{margin-top:24px}
.mini-etapes{margin-top:20px;border-top:1px solid var(--trait)}
.mini-etapes li{display:grid;grid-template-columns:40px minmax(0,1fr);padding:12px 0;border-bottom:1px solid var(--trait);font-weight:600}
.mini-etapes .n{font:500 12px/2 var(--mono);letter-spacing:.06em;color:var(--ocre)}
.enonce{font:500 clamp(24px,2.5vw,34px)/1.25 var(--titre);letter-spacing:-.02em;margin-bottom:40px}

/* Méthode : bande de nuit (classe .sombre) */
.methode{margin-top:clamp(64px,8vw,120px);padding:clamp(80px,10vw,140px) var(--bord)}
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.etapes li{padding:8px 32px 0}
.etapes li:first-child{padding-left:0}
.etapes li + li{border-left:1px solid var(--trait)}
.etapes .n{display:block;margin-bottom:28px;font:600 clamp(56px,6vw,88px)/1 var(--titre);letter-spacing:-.04em;color:var(--ocre)}
.etapes h2,.etapes h3{font:600 23px/1.3 var(--titre)}
.etapes p{margin-top:10px;color:var(--doux);font-size:16px}

/* Refus */
.refus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px clamp(40px,6vw,96px);align-items:start}
.refus-titre{font:600 clamp(34px,4.2vw,60px)/1.05 var(--titre);letter-spacing:-.03em}
.refus-liste{border-top:1px solid var(--trait)}
.refus-liste li{position:relative;padding:20px 0 20px 40px;border-bottom:1px solid var(--trait)}
.refus-liste li::before{content:"";position:absolute;left:0;top:33px;width:20px;height:2px;background:var(--ocre)}

/* Méthode : les trois portes, le test et le classement */
.tranche{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,72px) clamp(40px,6vw,96px);align-items:start}
.tranche-tete,.classement{grid-column:1 / -1}
.tranche-tete h2{font:600 clamp(34px,4.2vw,60px)/1.05 var(--titre);letter-spacing:-.03em}
.tranche-matiere{max-width:60ch;margin-top:16px;color:var(--doux)}
.tranche h3{font:600 clamp(21px,1.9vw,26px)/1.25 var(--titre);letter-spacing:-.015em}
.portes-liste{margin-top:20px;border-top:1px solid var(--trait);counter-reset:porte}
.portes-liste li{position:relative;padding:20px 0 20px 44px;border-bottom:1px solid var(--trait);counter-increment:porte}
.portes-liste li::before{content:counter(porte);position:absolute;left:0;top:20px;font:600 22px/1.3 var(--titre);color:var(--ocre)}
.portes-liste strong{display:block;font:600 19px/1.35 var(--titre)}
.portes-liste span{display:block;margin-top:6px;color:var(--doux)}
.portes-regle{margin-top:20px;font-weight:600}
.test-porte{padding:clamp(24px,3vw,40px);background:var(--clair);border:1px solid var(--trait);border-radius:16px}
.test-porte > .discret{margin-top:10px}
.test-porte fieldset{margin:24px 0 0;padding:0;border:0;min-width:0}
.test-porte legend{padding:0;font-weight:600}
.test-porte fieldset label{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:8px 8px 0 0;padding:0 18px;border:1px solid var(--trait-fort);border-radius:999px;cursor:pointer}
.test-porte fieldset label:has(input:checked){border-color:var(--ocre);background:color-mix(in srgb,var(--ocre) 10%,transparent)}
.test-porte fieldset label:has(input:focus-visible){outline:2px solid var(--ocre);outline-offset:2px}
.test-porte input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--ocre)}
.verdict{margin-top:28px;padding-top:24px;border-top:1px solid var(--trait)}
.verdict-attente{color:var(--doux)}
.verdict-t{font:600 clamp(28px,3vw,40px)/1.1 var(--titre);letter-spacing:-.02em;color:var(--ocre)}
.verdict-go p + p,.verdict-stop p + p{margin-top:10px}
.verdict-stop ul{margin-top:10px}
.verdict-stop li{position:relative;padding:8px 0 8px 32px}
.verdict-stop li::before{content:"";position:absolute;left:0;top:20px;width:18px;height:2px;background:var(--ocre)}
.verdict-lien{display:inline-block;margin-top:20px}
.classement{padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--trait)}
.classement > p{max-width:62ch;margin-top:14px}
.colonnes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:20px;border:1px solid var(--trait);border-radius:16px;overflow:hidden;counter-reset:col}
.colonnes li{padding:16px 14px;font-size:15px;font-weight:600;line-height:1.35;background:var(--clair);counter-increment:col}
.colonnes li + li{border-left:1px solid var(--trait)}
.colonnes li::before{content:counter(col,decimal-leading-zero);display:block;margin-bottom:8px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--ocre)}
.classement-mesurer{padding:16px 20px;border-left:3px solid var(--ocre);background:var(--clair);font-weight:600}

/* Questions */
.liste-q{border-top:1px solid var(--trait)}
.liste-q details{border-bottom:1px solid var(--trait)}
.liste-q summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font:600 clamp(19px,1.9vw,25px)/1.3 var(--titre);cursor:pointer;list-style:none}
.liste-q summary::-webkit-details-marker{display:none}
.liste-q summary::after{content:"+";flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--trait-fort);border-radius:50%;font:400 24px/1 var(--texte);color:var(--ocre);transition:transform .25s ease,border-color .25s ease}
.liste-q summary:hover::after{border-color:var(--ocre)}
.liste-q details[open] summary::after{transform:rotate(45deg)}
.liste-q summary:hover{color:var(--ocre)}
.liste-q p{max-width:70ch;padding-bottom:26px;color:var(--doux)}

/* Avis : rien n'est affiché tant que site.config.json n'en contient pas */
.avis-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:20px}
.avis{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(24px,3vw,36px);background:var(--clair);border:1px solid var(--trait);border-radius:16px}
.avis blockquote p{font:500 clamp(19px,1.8vw,23px)/1.4 var(--titre);letter-spacing:-.01em}
.avis-auteur{font-size:15px;font-weight:600}
.avis-vide{display:grid;gap:20px;justify-items:start;max-width:62ch;padding:clamp(28px,4vw,48px);border:1px dashed var(--trait-fort);border-radius:16px}
.avis-vide p{font-size:18px;color:var(--doux)}
/* Les règles de publication restent sous les avis, qu'il y en ait ou non. */
.avis-regles{max-width:62ch;margin-top:clamp(40px,5vw,64px)}
.avis-regles h2{font:600 clamp(23px,2.2vw,30px)/1.2 var(--titre);letter-spacing:-.02em}
.avis-regles ol{margin-top:20px;border-top:1px solid var(--trait);counter-reset:regle}
.avis-regles li{position:relative;padding:16px 0 16px 44px;border-bottom:1px solid var(--trait);counter-increment:regle}
.avis-regles li::before{content:counter(regle);position:absolute;left:0;top:16px;font:600 17px/1.5 var(--titre);color:var(--ocre)}
/* Sans avis publié, l'encadré et les règles se partagent la largeur au lieu de laisser la moitié droite vide.
   Sans :has (navigateurs anciens), la page garde sa colonne unique. */
@media (min-width:981px){
  .page-avis:has(> .avis-vide){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(48px,6vw,96px);align-items:start}
  .page-avis:has(> .avis-vide) .avis-regles{margin-top:0}
}

/* Fondateur */
.fondateur{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px clamp(40px,6vw,96px);align-items:center}
.photo{display:grid;place-items:center;aspect-ratio:4/5;border:1px dashed var(--trait-fort);border-radius:16px;color:var(--doux);font-size:14px;background:repeating-linear-gradient(135deg,var(--fond-2) 0 1px,transparent 1px 14px)}
.fondateur .enonce{margin-bottom:24px}
.parcours{max-width:62ch;font-size:17px;line-height:1.6;color:var(--doux)}
.photo.a-photo{border:0;background:none}
.photo img{width:100%;height:100%;object-fit:cover;border-radius:16px}

/* Bandeau d'appel, en bas de chaque page */
.bandeau-appel{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px clamp(40px,6vw,96px);
  align-items:end;margin-top:clamp(80px,10vw,140px);padding:clamp(64px,8vw,112px) var(--bord);
  border-top:1px solid var(--trait);
}
.bandeau-appel h2{grid-row:1 / 3;font:600 clamp(36px,4.6vw,68px)/1.02 var(--titre);letter-spacing:-.035em}
.bandeau-appel p{color:var(--doux);font-size:18px;max-width:40ch}
.bandeau-appel .pilule{justify-self:start;align-self:start}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px clamp(40px,6vw,96px);padding-bottom:clamp(80px,10vw,140px);align-items:start}
.contact-tete h1{font:600 clamp(42px,5.4vw,80px)/1 var(--titre);letter-spacing:-.04em}
.contact-tete > p{margin-top:20px;font-size:18px;color:var(--doux);max-width:40ch}
.commerciaux{margin-top:28px}
.commerciaux h2{font:600 22px/1.25 var(--titre);letter-spacing:-.01em}
.commerciaux p{margin-top:8px;font-size:16px;color:var(--doux);max-width:40ch}
.coord{margin-top:40px;border-top:1px solid var(--trait)}
.coord div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--trait)}
.coord dt{font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--doux);align-self:center}
.coord dd{font-weight:600}
.contact-zone{min-width:0}
.formulaire{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:clamp(24px,3vw,40px);background:var(--clair);border:1px solid var(--trait);border-radius:16px}
.champ{display:grid;gap:8px;align-content:start}
.champ label{font-size:14px;font-weight:700}
.champ .requis{font-weight:400;color:var(--doux)}
.formulaire .large,.formulaire button,.form-pied,.alerte{grid-column:1 / -1}
.formulaire input,.formulaire select,.formulaire textarea{
  width:100%;min-height:48px;padding:12px 14px;
  font:400 16px/1.4 var(--texte);color:var(--encre);
  background:var(--fond);border:1px solid var(--trait-fort);border-radius:10px;
}
.formulaire textarea{resize:vertical}
.formulaire input:focus-visible,.formulaire select:focus-visible,.formulaire textarea:focus-visible{border-color:var(--ocre);outline-offset:1px}
.formulaire button{justify-self:start}

/* Formulaire : erreurs sans rouge, signalées par une icône, un texte et une bordure épaisse */
.formulaire [aria-invalid=true]{border-color:var(--ocre);border-width:2px}
.erreur{display:flex;gap:8px;align-items:flex-start;font-size:14px;font-weight:600;color:var(--erreur)}
.erreur svg{flex:none;width:16px;height:16px;margin-top:3px}
.erreur:empty{display:none}
.alerte{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-left:2px solid var(--ocre);background:var(--fond-2);font-weight:600}
.alerte svg{flex:none;width:18px;height:18px;margin-top:3px}
.alerte:empty{display:none}
.succes{display:grid;gap:12px;padding:clamp(24px,3vw,40px);background:var(--clair);border:1px solid var(--trait);border-radius:16px}
.succes h3{font:600 28px/1.2 var(--titre)}
.succes:focus{outline:none}
.succes:focus-visible{outline:2px solid var(--ocre);outline-offset:3px}
.form-pied{font-size:14px;color:var(--doux)}
.form-pied a{color:var(--ocre);font-weight:600}
.piege{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
button[aria-busy=true]{opacity:.7;cursor:progress}

/* Pied (classe .sombre) */
.pied{padding:56px var(--bord);border-top:1px solid var(--trait)}
.pied-haut{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px clamp(40px,6vw,96px);align-items:start}
.studio{font:500 clamp(20px,2vw,28px)/1.35 var(--titre);letter-spacing:-.01em;max-width:46ch}
.studio a{color:var(--ocre);text-underline-offset:3px}
.recrutement{margin-top:20px;font:500 clamp(16px,1.4vw,19px)/1.4 var(--titre)}
.recrutement a{color:var(--ocre);text-underline-offset:3px}
.pied-pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.pied-pages a{display:flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--trait)}
.pied-pages a:hover{color:var(--ocre)}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:40px;padding-top:24px;border-top:1px solid var(--trait);font:500 12px/1.8 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--doux)}
.pied-bas .marque{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--encre)}
.pied-bas a{color:var(--encre);text-underline-offset:3px}
/* Zone tactile d'au moins 24 px : liens seuls sur leur ligne (WCAG 2.5.8). */
.coord dd a,.vitrine figcaption a,.capture-site figcaption a,.recrutement a,.pied-bas a{display:inline-flex;align-items:center;min-height:24px}

/* Apparition au défilement (posée par site.js) */
.apparait{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.1,1)}
html.anime .apparait:not(.vu){opacity:0;transform:translateY(28px)}
/* À l'impression, les blocs que l'écran n'a pas encore fait apparaître sortent quand même. */
@media print{
  html.anime .apparait:not(.vu){opacity:1;transform:none}
}

/* Page Métiers : le sommaire des familles, puis une section par famille, son recensement à
   gauche et l'aperçu de son site type à droite (à gauche une section sur deux, classe .inverse).
   Aperçus : captures 1200 × 750 prises par ../metiers/sections.py --captures. */
.metiers-index{padding:clamp(48px,6vw,88px) var(--bord) 0}
.index-familles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);border-top:1px solid var(--trait)}
.index-familles a{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:baseline;gap:12px;min-height:56px;padding:16px 0;border-bottom:1px solid var(--trait);text-decoration:none}
.index-familles .num{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--ocre)}
.index-familles .nom{font:600 18px/1.25 var(--titre);transition:color .2s ease}
.index-familles .nb{font-size:14px;color:var(--doux);font-variant-numeric:tabular-nums;white-space:nowrap}
.index-familles a:hover .nom{color:var(--ocre)}
.metiers-source{margin-top:28px;font-size:14px;color:var(--doux);max-width:90ch}
.metiers-source a{color:var(--encre);font-weight:600;text-underline-offset:3px}

.famille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px clamp(24px,3vw,48px);align-items:start;padding:clamp(80px,10vw,140px) var(--bord) 0;scroll-margin-top:24px}
.famille-texte{grid-column:1 / 6;grid-row:1;position:sticky;top:112px}
.famille-site{grid-column:6 / 13;grid-row:1}
.famille.inverse .famille-texte{grid-column:8 / 13}
.famille.inverse .famille-site{grid-column:1 / 8}
.famille-num{font:600 clamp(64px,8vw,120px)/.9 var(--titre);letter-spacing:-.04em;color:var(--ocre)}
.famille h2{margin-top:16px;font:600 clamp(32px,3.6vw,52px)/1.05 var(--titre);letter-spacing:-.03em}
.famille-total{margin-top:14px;font-size:17px;color:var(--doux)}
.famille-total strong{color:var(--encre);font-weight:700;font-variant-numeric:tabular-nums}
.famille-label{margin-top:36px;font:500 12px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--doux)}
.famille-metiers{margin-top:10px;border-top:1px solid var(--trait)}
.famille-metiers li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--trait)}
.famille-metiers .nb{color:var(--doux);font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.famille-autres{margin-top:12px;font-size:15px;color:var(--doux)}

.famille-ecran{display:block;overflow:hidden;border:1px solid var(--trait);border-radius:16px;background:var(--clair);text-decoration:none;box-shadow:0 40px 80px -48px color-mix(in srgb,var(--ombre) 60%,transparent);transition:transform .5s cubic-bezier(.2,.7,.1,1),box-shadow .5s ease}
.famille-ecran:hover{transform:translateY(-4px);box-shadow:0 48px 90px -44px color-mix(in srgb,var(--ombre) 65%,transparent)}
.ecran-barre{display:flex;align-items:center;gap:16px;height:34px;padding:0 14px;border-bottom:1px solid var(--trait);background:var(--fond-2)}
.ecran-barre .points{flex:none;width:8px;height:8px;margin-right:28px;border-radius:50%;background:var(--trait-fort);box-shadow:14px 0 0 var(--trait-fort),28px 0 0 var(--trait-fort)}
.ecran-nom{min-width:0;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.famille-ecran img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;background:var(--fond-2)}
.famille-demo{margin-top:28px;max-width:62ch}
.famille-demo .famille-label:first-child{margin-top:0}
.famille-nom{margin-top:6px;font-size:17px}
.famille-nom strong{font:600 22px/1.25 var(--titre);letter-spacing:-.01em}
.famille-desc{margin-top:10px;color:var(--doux)}
.famille-demo .famille-label{margin-top:24px}
.famille-rubriques{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.famille-rubriques li{padding:6px 12px;border:1px solid var(--trait);border-radius:999px;background:var(--clair);font:500 12px/1.4 var(--mono);letter-spacing:.06em}
.famille-demo .pilule{margin-top:28px}
.metiers-fin{padding:clamp(64px,8vw,112px) var(--bord)}
.metiers-fin .chapo{margin-top:0;color:var(--encre);font:600 clamp(24px,2.4vw,32px)/1.25 var(--titre);letter-spacing:-.02em;max-width:36ch}

/* Réalisations : les sites types en aperçus, trois par rangée */
.apercus.apercus-sites{grid-template-columns:repeat(3,minmax(0,1fr))}
.apercus-sites .apercu-famille{margin-top:18px;font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ocre)}
.apercus-sites .apercu h3{margin-top:6px;font-size:clamp(20px,1.8vw,24px);line-height:1.2;letter-spacing:-.015em}
.apercus-sites .apercu-lieu{margin-top:6px;font-size:15px;color:var(--doux)}

/* Accueil et Sites web : les familles de métiers en pastilles, vers leur section de la page Métiers. */
.familles-pastilles{margin-top:clamp(40px,5vw,64px)}
.familles-pastilles h3{font:600 clamp(24px,2.4vw,32px)/1.2 var(--titre);letter-spacing:-.02em}
.familles-pastilles ul{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.familles-pastilles ul a{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border:1px solid var(--trait-fort);border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.familles-pastilles ul a:hover{background:var(--encre);border-color:var(--encre);color:var(--fond)}

/* Utilitaires */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
.a-completer{padding:0 6px;border:1px dashed var(--ocre);border-radius:4px;background:var(--fond-2);white-space:nowrap}
[hidden]{display:none!important}

/* Pages Merci et 404, en-têtes de page */
main.message{padding:clamp(80px,12vw,160px) var(--bord);min-height:60vh}
main.message h1,.entree h1{font:600 clamp(40px,5.4vw,72px)/1.05 var(--titre);letter-spacing:-.035em}
main.message p{margin-top:20px;font-size:18px;color:var(--doux);max-width:46ch}
.message__liens{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.message__liens .secondaire{background:transparent;color:var(--encre);border:1px solid var(--encre)}
.message__liens .secondaire:hover{background:var(--encre);color:var(--fond)}
.entree{padding:clamp(56px,8vw,112px) var(--bord) clamp(48px,6vw,88px);background:var(--teinte)}
.chapo{margin-top:20px;font-size:18px;color:var(--doux);max-width:60ch}

/* Mentions légales */
.texte-long{padding:clamp(48px,6vw,80px) var(--bord) clamp(80px,10vw,140px);max-width:calc(70ch + 2 * var(--bord))}
.texte-long h2{font:600 clamp(26px,2.6vw,36px)/1.2 var(--titre);margin-top:56px;padding-top:24px;border-top:1px solid var(--trait)}
.texte-long h2:first-child{margin-top:0}
.texte-long h3{font:600 19px/1.4 var(--titre);margin-top:28px}
.texte-long p,.texte-long ul,.texte-long dl{margin-top:12px}
.texte-long ul{list-style:disc;padding-left:1.2em}
.texte-long li + li{margin-top:6px}
.texte-long a{color:var(--ocre);font-weight:600;text-underline-offset:3px;overflow-wrap:anywhere}
dl.fiche div{display:grid;grid-template-columns:220px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--trait)}
dl.fiche dt{font-weight:700}
dl.fiche dd{overflow-wrap:anywhere}
dl.fiche div:last-child{border-bottom:0}  /* le titre suivant a déjà son trait */
/* Liens des crédits : 44 px de haut pour le doigt (22 px avant). */
ul.credits li + li{margin-top:0}
ul.credits a{display:block;min-height:44px;padding:11px 0}

/* L'en-tête passe au menu repliable avant le reste : six liens en mono majuscules, la langue et l'appel
   n'y tiennent plus. Mesuré le 26/10 : en français l'en-tête déborde jusqu'à 1150 px environ. */
/* 1260 et non 1180 depuis « Sites par métier » (04/11) : en dessous, le menu français poussait le bouton hors de l'écran. */
@media (max-width:1260px){
  .menu,.entete .pilule{display:none}
  .menu-mobile{display:block}
}

/* Tablette */
@media (max-width:980px){
  .heros,.cas,.refus,.contact,.detail,.pied-haut,.bandeau-appel{grid-template-columns:minmax(0,1fr)}
  .bandeau-appel h2{grid-row:auto}
  .encart{position:static}
  .cartes{grid-template-columns:minmax(0,1fr)}
  .forfaits-liste{grid-template-columns:minmax(0,1fr)}
  .carte h3{margin-top:24px}
  .cartes.sites-types{grid-template-columns:repeat(2,minmax(0,1fr))}
  .index-familles,.apercus.apercus-sites{grid-template-columns:repeat(2,minmax(0,1fr))}
  .famille{grid-template-columns:minmax(0,1fr);gap:32px}
  .famille-texte,.famille-site,.famille.inverse .famille-texte,.famille.inverse .famille-site{grid-column:1;grid-row:auto;position:static}
  .ligne{grid-template-columns:minmax(0,1fr) 120px}
  .ligne p{grid-column:1;grid-row:2}
  .ligne .vue{grid-column:2;grid-row:1 / 3}
  .etapes{grid-template-columns:minmax(0,1fr)}
  .tranche{grid-template-columns:minmax(0,1fr)}
  .colonnes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .colonnes li + li{border-left:0}
  .colonnes li{border-top:1px solid var(--trait)}
  .colonnes li:nth-child(-n+2){border-top:0}
  .colonnes li:nth-child(even){border-left:1px solid var(--trait)}
  .colonnes li:last-child:nth-child(odd){grid-column:1 / -1}
  .etapes li,.etapes li:first-child{padding:28px 0}
  .etapes li + li{border-left:0;border-top:1px solid var(--trait)}
  .cas-court{grid-template-columns:96px minmax(0,1fr)}
  .cas-court .faits-courts{grid-column:1 / -1}
  .cas-court.cas-capture{grid-template-columns:minmax(0,1fr)}
  .apercus.apercus-trois{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apercus-trois li:last-child:nth-child(odd){grid-column:1 / -1}
  .apercus-trois li:last-child:nth-child(odd) .apercu-image{aspect-ratio:21/9}
  .apercus-trois li:last-child:nth-child(odd) .apercu-logo img{width:20%}
  .logo-b2i{width:96px}
}

/* Téléphone */
@media (max-width:640px){
  .cartes.sites-types{grid-template-columns:minmax(0,1fr);gap:12px}
  .index-familles,.apercus.apercus-sites{grid-template-columns:minmax(0,1fr)}
  .famille-num{font-size:56px}
  .famille-ecran{border-radius:12px}
  .sites-types .carte{padding:20px}
  .sites-types .carte p{margin-top:8px}
  .sites-types .carte-lien{margin-top:14px}
  body{font-size:16px}
  /* Un libellé long (« Voir un site type pour chaque famille de métiers ») faisait 407 px sur une ligne. */
  .pilule{white-space:normal}
  .pilule svg{flex:none}
  .entete{gap:12px}
  .entete .marque{gap:12px}
  .entete .marque svg{width:52px;height:26px}
  .marque-mot{font-size:18px}
  .tuile{--rayon:12px}
  .tuile-photo{aspect-ratio:4/3}
  .mosaique{gap:8px}
  .apercus{grid-template-columns:minmax(0,1fr)}
  .apercus.apercus-trois{grid-template-columns:minmax(0,1fr)}
  .apercus-trois li:last-child:nth-child(odd) .apercu-image{aspect-ratio:16/10}
  .apercus-trois li:last-child:nth-child(odd) .apercu-logo img{width:38%}
  .vitrine .ecran{grid-column:1 / -1}
  .vitrine .mobile{grid-column:8 / 12;grid-row:2;margin:-24% 0 0;border-width:5px;border-radius:20px}
  .vitrine figcaption{grid-row:3;margin-top:24px}
  .ligne{grid-template-columns:minmax(0,1fr) 84px;gap:12px 16px}
  .fondateur{grid-template-columns:minmax(0,1fr)}
  .photo{max-width:240px}
  .formulaire{grid-template-columns:minmax(0,1fr)}
  dl.fiche div{grid-template-columns:minmax(0,1fr);gap:4px}
  .offre{grid-template-columns:minmax(0,1fr)}
  .offre .prix{white-space:normal}
  .catalogue li{flex-wrap:wrap}
  .pied-pages{grid-template-columns:minmax(0,1fr)}
}

/* Petit téléphone : la ligne de sous-titre du logo cède la place au menu */
@media (max-width:380px){
  .marque-sous{display:none}
}

/* Sous 400 px, logo, langue et menu demandaient 386 px : la page s'élargissait à 320, 360 et 375.
   Tout se resserre ; B״H fait 21 px de haut pour 13 px de CONSULTING. */
@media (max-width:400px){
  .entete,.entete-actions,.entete .marque{gap:8px}
  .entete .marque svg{width:42px;height:21px}
  .marque-mot{font-size:13px}
  .langue{padding:0 10px}
  .menu-mobile summary{padding:0 14px}
  /* « Ingredients » ne tenait pas dans 160 px à côté du logo B2I : le logo passe au-dessus. */
  .cas-court{grid-template-columns:minmax(0,1fr);gap:24px}
  .cas-court .logo-b2i{width:80px}
  /* « indépendants » à 30 px faisait 193 px dans une colonne de 188 à 320 px de large. */
  .ligne h3{font-size:27px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}