/* Socle des pages françaises (accueil photo, novembre 2026) : jetons, surfaces, bouton, barre du haut, ses panneaux de pôle
   et son menu plein écran, pied de page. Liée après site.css par src/fr/layout.html ; le dossier fr/ n'est jamais copié
   dans le site anglais. Charte : angles droits hors des boutons et du formulaire, ni ombre ni dégradé, seuls transform,
   opacity et clip-path s'animent, durées et courbes en jetons (table ci-dessous et celle de tokens.css), survols
   réservés aux vrais pointeurs, Bleu dragée jamais sur une surface Glacier ni pour du texte. Contrôles :
   tests/charte-fr.test.mjs. */

:root {
  /* Mise en page : largeur de contenu (celle du corps des pages intérieures ; 1280px sur l'accueil), hauteur de la barre */
  --largeur: 1320px;
  --barre: 72px;
  /* Mouvement : complète la table de tokens.css (--ease, --ease-in-out, --ease-drawer, --dur-1, --dur-2) */
  --dur-appui: 160ms;   /* retour d'appui d'un bouton */
  --dur-entree: 300ms;  /* apparition au défilement, entrée du hero */
  --dur-tiroir: 500ms;  /* menu mobile */
  --dur-logo: 650ms;    /* logotype du hero */
  --pas-liste: 50ms;    /* décalage entre voisins d'une liste */
  --pas-hero: 60ms;     /* décalage entre les éléments du hero */
  --courbe-recul: linear; /* recul du hero, lié au défilement : il suit la page, sans accélération */
  /* Matières : Onyx translucide et flou d'arrière-plan (la barre à 80 %, son panneau à 92 %) */
  --matiere-barre: color-mix(in srgb, var(--onyx) 80%, transparent);
  --matiere-panneau: color-mix(in srgb, var(--onyx) 92%, transparent);
  --flou: blur(20px) saturate(180%);
  /* Interlignages du brief : texte, titres, grands titres */
  --interligne: 1.5;
  --interligne-titre: 1.1;
  --interligne-grand: 1.05;
  /* Rayon des boutons et des champs du formulaire, le seul arrondi du site français. En rem : il suit la taille de texte
     choisie par le visiteur, comme leur texte (12px à la taille normale, un quart de la hauteur d'un bouton ou d'un champ
     de 48px). */
  --rayon: 0.75rem;
}
.page-accueil { --largeur: 1280px; }

/* Replis des matières, en un seul endroit : sans prise en charge du flou ou de color-mix() (Safari avant 16.2, où la
   matière serait sans valeur, donc sans fond), avec la transparence réduite ou le contraste renforcé, la barre et son
   panneau sont en Onyx plein, sans flou. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --matiere-barre: var(--onyx); --matiere-panneau: var(--onyx); }
}
@supports not (color: color-mix(in srgb, red, blue)) {
  :root { --matiere-barre: var(--onyx); --matiere-panneau: var(--onyx); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --matiere-barre: var(--onyx); --matiere-panneau: var(--onyx); --flou: none; }
}

/* Socle. Le fond de html est Onyx (aucune bande claire au rebond de Safari). La barre du haut est fixe : elle n'occupe plus
   de place dans le flux, donc les pages autres que l'accueil reçoivent en tête la place de l'ancienne barre et de son filet
   (73px), et leur corps ne bouge pas ; une ancre ou un élément qui prend le focus s'arrête sous la barre. La barre fixe du
   bas a quitté les pages françaises : l'espace que site.css lui réserve sous 1080px est rendu. */
html { background: var(--onyx); scroll-padding-top: calc(var(--barre) + 16px); scroll-padding-bottom: auto; }
body { padding-bottom: 0; }
body:not(.page-accueil) { padding-top: calc(var(--barre) + 1px); }

/* Largeur de contenu : 1280px sur l'accueil, 1320px ailleurs, marges fluides (zones sûres comprises dans --gutter) */
.cadre { width: 100%; max-width: calc(var(--largeur) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Surfaces : couleurs de texte, de filet, d'anneau de focus et de sélection. Les gris sont des transparences (contraste du
   texte secondaire : 7,4:1 sur Onyx, 6:1 sur Glacier). Sur Glacier, tout est Onyx : jamais de Bleu dragée. La barre du
   haut prend les couleurs d'une surface Onyx, pas son fond (le sien est une matière). */
.sur-onyx, .entete {
  --text: var(--glacier);
  --text-muted: color-mix(in srgb, var(--glacier) 62%, transparent);
  --rule: color-mix(in srgb, var(--glacier) 14%, transparent);
  --ring: var(--bleu);
  color: var(--text);
}
.sur-onyx { background: var(--onyx); }
.sur-glacier {
  --text: var(--onyx);
  --text-muted: color-mix(in srgb, var(--onyx) 62%, transparent);
  --rule: color-mix(in srgb, var(--onyx) 14%, transparent);
  --ring: var(--onyx);
  background: var(--glacier);
  color: var(--text);
}
.sur-onyx::selection, .sur-onyx ::selection { background: var(--bleu); color: var(--onyx); }
.sur-glacier::selection, .sur-glacier ::selection { background: var(--onyx); color: var(--glacier); }
/* Contraste renforcé : texte secondaire et filets en couleur pleine */
@media (prefers-contrast: more) {
  .sur-onyx, .entete { --text-muted: var(--glacier); --rule: var(--glacier); }
  .sur-glacier { --text-muted: var(--onyx); --rule: var(--onyx); }
}

/* Angles : droits partout, sauf les boutons et le formulaire, arrondis d'un même rayon (demandes de Guillaume du
   14/11/2026 ; le brief voulait tout à angles droits). Cette règle est la seule à arrondir, sur une liste fermée. Ce qui
   se presse et se dessine comme un bouton : les boutons d'ici (.bouton) et ceux des pages intérieures (.btn, site.css),
   pour qu'une page ne mêle pas les deux formes ; les liens d'évitement ; le bouton de menu, pour son anneau de focus ;
   les commandes du carrousel et le signe de lecture du Reel (accueil). Puis le formulaire (gabarit et styles de
   site.css, inchangés) : ses champs et son message d'échec d'envoi, encadré comme eux. L'anneau de focus épouse
   l'arrondi. Vignettes, cartes, cadres, panneaux et étiquettes gardent leurs angles droits. Contrôle :
   tests/charte-fr.test.mjs. */
.bouton, .btn, .skip, .entete-menu-bouton, .carrousel-bouton, .reel-icone, .field input, .field textarea, .form-erreur-envoi { border-radius: var(--rayon); }

/* Bouton : rectangle plein aux angles arrondis. .bouton-accent (Bleu dragée, texte Onyx) sur fond Onyx ; .bouton-onyx
   (Onyx, texte Glacier) sur fond Glacier ; .bouton-compact dans la barre. Appui : léger recul, sur tous les appareils, qui
   repart de la valeur affichée. */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 1px solid transparent; font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform var(--dur-appui) var(--ease), opacity var(--dur-appui) var(--ease); }
.bouton:active { transform: scale(0.97); }
.bouton-accent { background: var(--bleu); border-color: var(--bleu); color: var(--onyx); }
.bouton-onyx { background: var(--onyx); border-color: var(--onyx); color: var(--glacier); }
.bouton-compact { min-height: 44px; padding: 8px 16px; font-size: var(--step--1); }
/* Dans la barre, haute de 72px : marges et interligne serrés, pour qu'un libellé passé sur deux lignes (taille de texte
   doublée par le visiteur) y tienne encore. À la taille normale rien ne change : le bouton garde les 44px de sa cible. */
.entete .bouton-compact { padding-block: 4px; line-height: var(--interligne-titre); }
/* Survol : les couleurs s'inversent d'un coup (une couleur ne s'anime pas). Le filet garde la couleur du bouton ; le texte
   passe en Glacier ou en Onyx, jamais en Bleu dragée. */
@media (hover: hover) and (pointer: fine) {
  .bouton-accent:hover { background: var(--onyx); color: var(--glacier); }
  .bouton-onyx:hover { background: var(--glacier); color: var(--onyx); }
}
/* Mouvement réduit : plus d'échelle à l'appui, un voile à la place */
@media (prefers-reduced-motion: reduce) { .bouton:active { transform: none; opacity: 0.7; } }
:root:where(.mouvement-reduit) .bouton:active { transform: none; opacity: 0.7; }

/* Barre du haut : fixe, pleine largeur, au-dessus de tout sauf des liens d'évitement (.skip, 90). */
.entete { position: fixed; inset: 0 0 auto; z-index: 80; height: var(--barre); }
/* Matière : un calque sous le contenu de la barre porte le fond translucide et le flou ; seule son opacité change. Le flou
   n'est pas sur la barre elle-même, pour que le panneau et le menu plein écran ne soient pas enfermés dans sa boîte.
   La matière est là par défaut, partout : sans JavaScript, si js/entete.js ne se charge pas, à l'arrivée sur une ancre.
   Elle ne s'efface que tout en haut de l'accueil (html.en-haut, posé par ce script), et y revient tant qu'un panneau est
   ouvert (.panneau-ouvert, posé par lui aussi) : la barre et son panneau forment une seule surface. Aucun filet en état
   normal. */
.entete::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--matiere-barre); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); transition: opacity var(--dur-2) var(--ease); }
html.en-haut .page-accueil .entete:not(.panneau-ouvert)::before { opacity: 0; }
/* Calque Onyx du menu plein écran (.entete::after, créé sous 900px, plus bas) : transparent à toute largeur. WebKit garde
   un style pour ce pseudo-élément là où il n'est pas créé ; sans cette règle il le faisait partir de 1 vers 0 au passage
   sous 900px (tablette tournée, fenêtre réduite) : barre noire le temps de son attente, sur une page claire. */
.entete::after { opacity: 0; }
/* Contraste renforcé : un filet Glacier plein sous la barre, pris dans sa hauteur */
@media (prefers-contrast: more) { .entete::before, .entete::after { border-bottom: 1px solid var(--glacier); } }
/* Repère d'un pixel en haut du document : tant qu'il est dans la fenêtre, la page est en haut */
.entete-repere { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* Grand écran : logotype à gauche, pôles au centre de la barre, Contact et bouton à droite */
.entete-barre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; height: 100%; }
.entete-logo { justify-self: start; display: flex; align-items: center; width: 145px; max-width: 100%; min-height: 44px; }
.entete-logo svg { width: 100%; }
/* Conteneur de découpe du menu plein écran, dont la navigation est le seul enfant. Hors de ce menu (900px et plus, ou sans
   JavaScript) il n'a pas de boîte : la navigation reste l'élément de grille de la barre. */
.entete-decoupe { display: contents; }
.entete-poles { display: flex; align-items: center; gap: 4px; }
.entete-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.entete-entree, .entete-lien { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; font-size: 1rem; font-weight: 500; text-decoration: none; }
/* Page courante : soulignée en Glacier (le Bleu dragée reste au bouton, au logotype et à l'anneau de focus) */
:is(.entete-entree, .entete-lien)[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Appui sur ce qui se presse hors bouton (la surbrillance native au toucher est retirée par site.css) : voile immédiat,
   retour en fondu */
.entete-logo, .entete-entree, .entete-lien, .entete-service, .entete-menu-bouton { transition: opacity var(--dur-1) var(--ease); }
:is(.entete-logo, .entete-entree, .entete-lien, .entete-service, .entete-menu-bouton):active { opacity: 0.6; transition: none; }
@media (hover: hover) and (pointer: fine) {
  :is(.entete-entree, .entete-lien):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
  :is(.entete-entree, .entete-lien)[aria-current]:hover { text-decoration-thickness: 2px; }
}
.entete-menu-bas, .entete-menu-bouton { display: none; }
/* Service d'un pôle (panneau, menu plein écran) : son nom, puis son prix sur sa propre ligne, en gris. La page courante
   est soulignée comme une entrée de la barre. */
.entete-service { display: block; min-height: 44px; padding-block: 8px; text-decoration: none; }
.entete-service-nom, .entete-service-prix { display: block; line-height: var(--interligne); }
.entete-service-nom { font-weight: 600; }
.entete-service-prix { color: var(--text-muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.entete-service[aria-current] .entete-service-nom { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .entete-service:hover .entete-service-nom { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
  .entete-service[aria-current]:hover .entete-service-nom { text-decoration-thickness: 2px; }
}

/* 900px et plus : panneau de pôle. Les trois groupes occupent la même surface sous la barre, sur toute sa largeur, dans
   une matière plus opaque que la sienne (mêmes replis) ; leur contenu s'aligne sur .cadre. Un filet ferme le bas du
   panneau, qui sans lui se confond avec une page au fond Onyx (en contraste renforcé, --rule est en Glacier plein).
   L'état vient de aria-expanded, posé sur l'entrée par js/entete.js : sans lui le panneau reste masqué et l'entrée est
   un simple lien.
   Ouverture : fondu et échelle depuis 0,97, origine posée par le script au niveau de l'entrée ; fermeture plus courte,
   le panneau n'étant masqué qu'au bout. Au clavier et d'un pôle à l'autre (.sans-transition), tout change d'un coup. */
@media (min-width: 900px) {
  .entete-panneau { position: absolute; inset: 100% 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-content: start; column-gap: 24px; padding: 32px max(var(--gutter), calc((100% - var(--largeur)) / 2)) 48px; border-bottom: 1px solid var(--rule); background: var(--matiere-panneau); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); opacity: 0; transform: scale(0.97); visibility: hidden; transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), visibility var(--dur-1) var(--ease); }
  .entete-entree[aria-expanded="true"] + .entete-panneau { opacity: 1; transform: none; visibility: visible; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
  .entete.sans-transition .entete-panneau { transition: none; }
  .entete-phrase { grid-column: 1 / span 4; padding-block: 8px; font-size: clamp(1.125rem, 0.8rem + 0.6vw, 1.375rem); line-height: var(--interligne); text-wrap: balance; }
  .entete-services { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  /* Fenêtre étroite : la phrase au-dessus des services, qui gardent trois colonnes assez larges pour leurs noms */
  @media (max-width: 1179px) { .entete-phrase, .entete-services { grid-column: 1 / -1; } }
}
/* Mouvement réduit : le panneau n'a plus d'échelle, il reste le fondu */
@media (prefers-reduced-motion: reduce) { .entete-panneau { transform: none; } }
:root:where(.mouvement-reduit) .entete-panneau { transform: none; }

/* Sous 900px : logotype (jamais sous 96px de large, minimum du guide du logo), bouton compact, bouton de menu. La colonne
   du logotype cède la place la première ; le libellé du bouton passe sur deux lignes plutôt que de déborder.
   La condition est le complément exact de « 900px et plus », que lit aussi js/entete.js : même pour une largeur de
   fenêtre à virgule (zoom, écran à 125 %), la feuille et le script sont dans le même mode. */
@media not all and (min-width: 900px) {
  /* Menu ouvert, la page ne défile plus (.menu-fr-ouvert, plus bas). Là où la barre de défilement prend de la place
     (Windows, Linux, macOS réglé sur « toujours »), elle disparaîtrait et la page s'élargirait d'autant, sous le pointeur,
     à chaque ouverture et à chaque fermeture : sa place reste réservée. Sans effet sur les barres superposées. */
  html { scrollbar-gutter: stable; }
  .entete-barre { grid-template-columns: minmax(96px, 1fr) auto; column-gap: 8px; }
  .entete-contact { display: none; }
  .entete-actions { gap: 4px; }
  .entete .bouton-compact { padding-inline: 12px; }
  /* Très petit écran (320px) : le libellé garde une seule ligne à côté d'un logotype de 96px */
  @media (max-width: 359px) { .entete .bouton-compact { padding-inline: 10px; } }
  /* Cible de 44px ; l'icône de 24px s'aligne sur la marge de la page. Menu ouvert, ses deux traits se croisent. */
  .entete-menu-bouton { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: none; border: 0; cursor: pointer; }
  /* Le bouton de menu est écrit masqué (hidden) : js/entete.js le révèle. D'ici là sa place est gardée, sans qu'il se
     montre ni prenne le focus : à l'arrivée du module, le bouton principal ne bouge pas (il sautait de 38px). Sans
     JavaScript il reste hors du flux. Si le module ne se charge pas, cette place reste vide. */
  .js .entete-menu-bouton[hidden] { display: flex !important; visibility: hidden; }
  .entete-menu-bouton svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
  .entete-menu-bouton path { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-2) var(--ease); }
  .entete-menu-bouton[aria-expanded="true"] path:first-child { transform: translateY(3.5px) rotate(45deg); }
  .entete-menu-bouton[aria-expanded="true"] path:last-child { transform: translateY(-3.5px) rotate(-45deg); }

  /* Menu plein écran (js/entete.js pose html.menu-fr-ouvert) : la navigation devient un panneau Onyx sous la barre,
     qui en descend et y remonte par le même chemin. Une seule propriété est en course, son déplacement. La découpe ne
     s'anime pas : c'est un conteneur immobile, la zone sous la barre, qui coupe ce qui en dépasse (une découpe animée
     sur le menu, jumelle de son déplacement, n'était pas présentée dans la même image que lui : bande du menu détachée
     de la barre, menu par-dessus elle). Rien ne passe donc derrière la barre. Le conteneur porte aussi la visibilité :
     fermé, le menu n'est masqué qu'au bout de sa course. Encore visible pendant la remontée, il ne retient pas les
     appuis : seul le menu en reçoit, la page qu'il découvre répond aussitôt. Le menu liste les trois pôles (titre lié),
     leurs services et leurs prix, puis Contact et le bouton ; il défile seul, sans entraîner la page, et respecte les
     zones sûres (--gutter porte celles des côtés). */
  .js .entete-decoupe { display: block; position: fixed; inset: var(--barre) 0 0; overflow: hidden; overflow: clip; pointer-events: none; visibility: hidden; transition: visibility var(--dur-tiroir) var(--ease); }
  .menu-fr-ouvert .entete-decoupe { visibility: visible; transition: none; }
  .js .entete-nav { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); background: var(--onyx); pointer-events: auto; transform: translateY(-100%); transition: transform var(--dur-tiroir) var(--ease-drawer); }
  .menu-fr-ouvert .entete-nav { transform: none; }
  /* Menu ouvert : la barre passe en Onyx plein (un calque en fondu), pour ne faire qu'une surface avec lui. À la
     fermeture, le calque reste plein tant que le menu remonte et ne s'efface qu'avec la fin de sa course : son fondu
     attend la durée du tiroir moins la sienne (sans cela, sur une section claire, la barre redevenait grise au-dessus
     d'un menu encore noir). À l'ouverture, la transition est redéclarée sans attente. */
  .entete::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--onyx); transition: opacity var(--dur-2) var(--ease) calc(var(--dur-tiroir) - var(--dur-2)); }
  .menu-fr-ouvert .entete::after { opacity: 1; transition: opacity var(--dur-2) var(--ease); }
  .js .entete-poles { display: block; }
  .js .entete-pole { padding-block: 12px; border-bottom: 1px solid var(--rule); }
  .js .entete-phrase { display: none; }
  .js :is(.entete-entree, .entete-menu-bas .entete-lien) { min-height: 48px; padding-inline: 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 650; letter-spacing: var(--tracking-m); line-height: var(--interligne-titre); }
  .entete-menu-bas { display: block; }
  .js .entete-menu-bas { padding-top: 12px; }
  .js .entete-menu-bas .bouton { width: 100%; margin-top: 20px; }

  /* Sans JavaScript, pas de menu : la barre quitte le haut de la fenêtre pour le flux de la page (elle ne recouvre donc
     rien) et montre, sous le logotype et le bouton, les trois pôles et Contact en simples liens, sans panneaux. */
  html:not(.js) .entete { position: relative; height: auto; }
  html:not(.js) .entete-barre { grid-template-rows: var(--barre) auto; height: auto; }
  html:not(.js) .entete-nav { grid-row: 2; grid-column: 1 / -1; display: flex; flex-wrap: wrap; column-gap: 20px; padding-bottom: 12px; }
  html:not(.js) .entete-poles { flex-wrap: wrap; gap: 0 20px; }
  html:not(.js) :is(.entete-entree, .entete-menu-bas .entete-lien) { min-width: 44px; padding-inline: 0; }
  html:not(.js) :is(.entete-panneau, .entete-menu-bas .bouton) { display: none; }
  html:not(.js) body:not(.page-accueil) { padding-top: 0; }

  /* Mouvement réduit : ni course ni croisement animé, le menu paraît et disparaît en fondu, déjà à sa place ; son
     conteneur n'est masqué qu'au bout du fondu, et le calque de la barre s'efface avec lui, sans attente */
  @media (prefers-reduced-motion: reduce) {
    .js .entete-decoupe { transition: visibility var(--dur-2) var(--ease); }
    .menu-fr-ouvert .entete-decoupe { transition: none; }
    .js .entete-nav { transform: none; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
    .menu-fr-ouvert .entete-nav { opacity: 1; }
    .entete::after { transition: opacity var(--dur-2) var(--ease); }
    .entete-menu-bouton path { transition: none; }
  }
  :root:where(.mouvement-reduit) .entete-decoupe { transition: visibility var(--dur-2) var(--ease); }
  :root:where(.mouvement-reduit).menu-fr-ouvert .entete-decoupe { transition: none; }
  :root:where(.mouvement-reduit) .entete-nav { transform: none; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
  :root:where(.mouvement-reduit).menu-fr-ouvert .entete-nav { opacity: 1; }
  :root:where(.mouvement-reduit) .entete::after { transition: opacity var(--dur-2) var(--ease); }
  :root:where(.mouvement-reduit) .entete-menu-bouton path { transition: none; }
  /* Passage sous 900px (fenêtre réduite, tablette tournée) : la navigation gagne sa place de menu fermé d'un coup */
  .entete.sans-transition :is(.entete-decoupe, .entete-nav) { transition: none; }
}
/* La page ne défile pas derrière le menu ouvert */
.menu-fr-ouvert { overflow: hidden; }
/* Focus donné par js/entete.js après un toucher ou un clic (premier lien du menu à l'ouverture, bouton de menu à la
   fermeture) : pas d'anneau, que Safari afficherait. Le script retire la classe dès que le focus quitte l'élément ; au
   clavier il ne la pose pas. */
.focus-sans-anneau:focus-visible { outline: none; }

/* Pied de page : surface Onyx (.sur-onyx), un filet fin au-dessus, trois rangées dans .cadre, séparées par le même filet.
   Hiérarchie par la graisse et la couleur : ce qui se presse et ce qui titre est en Glacier, le texte d'accompagnement
   (appel, adresse, copyright) en gris. Le bas respecte la zone sûre ; les côtés, c'est .cadre qui s'en charge. */
.pied { padding-block: clamp(56px, 7vw, 96px) calc(24px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); }

/* Rangée 1, l'appel final : la phrase en police de titre (un paragraphe : un titre s'ajouterait au plan de chaque page),
   le texte, le bouton. Côte à côte quand la place le permet, le bouton sur la ligne du bas ; sinon l'un sous l'autre. */
.pied-appel { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px 48px; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--rule); }
.pied-appel-message { flex: 1 1 22rem; min-width: 0; }
.pied-appel-titre { max-width: 20ch; font-family: var(--font-display); font-size: var(--step-2); font-weight: 650; letter-spacing: var(--tracking-l); line-height: var(--interligne-titre); text-wrap: balance; overflow-wrap: anywhere; }
.pied-appel-texte { max-width: 46ch; margin-top: 16px; color: var(--text-muted); line-height: var(--interligne); text-wrap: pretty; }
/* Le bouton garde sa largeur tant qu'elle tient dans la rangée ; au-delà (petit écran et taille de texte doublée), son
   libellé passe à la ligne au lieu de faire défiler la page de côté */
.pied-appel .bouton { flex: 0 1 auto; }

/* Rangée 2 : la marque et ses coordonnées, une colonne par pôle, la colonne Studio. Chaque lien est une cible de 44px au
   moins dans les deux sens (« IA » ne fait que 16px de large), sur toute la hauteur de sa ligne (ou de ses lignes, quand
   le libellé passe à la ligne dans une colonne étroite). */
.pied-colonnes { display: grid; gap: 40px 24px; padding-block: clamp(40px, 5vw, 64px); font-size: 1rem; line-height: var(--interligne); }
.pied-poles { display: grid; gap: 40px 24px; }
.pied-titre { display: flex; align-items: center; min-height: 44px; font-weight: 600; }
.pied-liens a, .pied-titre a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding-block: 10px; text-decoration: none; overflow-wrap: anywhere; }
/* Marque : le logotype à la taille de celui de la barre, dans une ligne de 44px comme un titre de colonne (ils partagent
   la première ligne du pied) ; la signature en police de titre ; puis l'adresse et les liens */
.pied-logo { display: flex; align-items: center; min-height: 44px; }
.pied-logo svg { width: 145px; }
.pied-signature { margin-top: 2px; font-family: var(--font-display); font-size: 1.125rem; font-weight: 650; letter-spacing: var(--tracking-m); line-height: var(--interligne-titre); }
.pied-marque address { max-width: 26ch; margin-top: 20px; color: var(--text-muted); }
.pied-marque .pied-liens { margin-top: 10px; }
/* Une seule colonne sur téléphone. À partir de 760px : la marque sur sa ligne, ses liens à droite, sur la troisième
   colonne et à la hauteur du logotype (une dernière rangée souple prend leur hauteur en trop : logotype, signature et
   adresse restent groupés) ; puis quatre colonnes égales, dont trois pour la navigation des pôles. */
@media (min-width: 760px) {
  .pied-colonnes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pied-marque { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto) 1fr; column-gap: 24px; }
  .pied-marque > * { grid-column: 1; }
  .pied-marque .pied-liens { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
  .pied-poles { grid-column: span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* À partir de 1180px : tout sur une ligne, sur la grille de douze colonnes (celle du panneau de la barre). La marque en
   prend quatre et redevient un seul bloc ; chaque pôle et Studio en prennent deux (la navigation des pôles en occupe six,
   qu'elle redécoupe en trois). */
@media (min-width: 1180px) {
  .pied-colonnes { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pied-marque { grid-column: span 4; display: block; }
  .pied-marque .pied-liens { margin-top: 10px; }
  .pied-poles { grid-column: span 6; }
  .pied-colonnes > .pied-colonne { grid-column: span 2; }
}

/* Rangée 3, les mentions : liens légaux et lien de langue en ligne, puis le copyright, en petit corps */
.pied-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 32px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: var(--step--1); letter-spacing: var(--tracking-s); line-height: var(--interligne); }
.pied-legal .pied-liens { display: flex; flex-wrap: wrap; column-gap: 28px; }
.pied-copyright { display: flex; align-items: center; min-height: 44px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Appui sur un lien du pied : voile immédiat, retour en fondu, comme les liens de la barre. Survol : souligné, d'un coup. */
.pied-liens a, .pied-titre a { transition: opacity var(--dur-1) var(--ease); }
:is(.pied-liens a, .pied-titre a):active { opacity: 0.6; transition: none; }
@media (hover: hover) and (pointer: fine) {
  :is(.pied-liens a, .pied-titre a):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}

/* Impression : ni barre, ni pied, ni liens d'évitement (fixes, ils sortaient sur chaque page, par-dessus le contenu) */
@media print {
  .entete, .pied, .skip { display: none; }
  body:not(.page-accueil) { padding-top: 0; }
}

/* Couleurs forcées (thèmes de contraste du système) : le remplissage d'un tracé n'est pas forcé. Sur une palette claire,
   le logotype resterait en Glacier sur un fond blanc : il prend la couleur du texte du canevas. */
@media (forced-colors: active) {
  .logo-haut, .logo-bas { fill: CanvasText; }
}