/*
  Procimex — socle commun à toutes les pages.

  Ce fichier contient uniquement ce qui est partagé : polices, palette,
  typographie, boutons, gabarit, en-tête et pied de page. Les styles propres à
  une page vivent dans leur propre feuille, pas ici.

  Référence : Test design/accueil-test-v10.html (version validée le 19/08).
*/

/* ---------- Polices auto-hébergées ----------
   Servies depuis notre serveur, pas depuis Google : une requête externe de
   moins, et aucune donnée visiteur envoyée à un tiers (RGPD).
   Sous-ensembles latin + latin-ext uniquement — le reste ne sert pas au
   français. font-display: swap affiche le texte tout de suite dans la police
   de repli, plutôt que de laisser un blanc le temps du téléchargement. */

@font-face {
  font-family: 'Proza Libre';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/proza-libre-v9-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Proza Libre';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/proza-libre-v9-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Proza Libre';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/proza-libre-v9-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-v44-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open-sans-v44-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-v44-latin_latin-ext-700.woff2') format('woff2');
}

/* ---------- Remise à zéro ----------
   La première ligne n'est pas décorative : sans elle, le navigateur applique
   sa marge par défaut au body et un liseré blanc apparaît sur les bords de
   toute la page. */
html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }

/* ---------- Palette ----------
   Toute couleur utilisée dans le site doit passer par une variable ci-dessous.
   Ne jamais écrire une couleur en dur ailleurs — s'il manque une nuance,
   l'ajouter ici avec un nom et un commentaire de rôle.
   Ces valeurs sont recopiées dans functions.php (palette de l'éditeur de
   blocs) : toute modification doit être répercutée là-bas aussi. */
:root {
  --ink:      oklch(24% 0.045 232);
  --body-ink: oklch(40% 0.004 240);   /* essai 21/08 : gris quasi neutre, chroma réduite par rapport à l'original (245, 0.022) */
  --mute:     oklch(55% 0.018 240);        /* texte secondaire sur fond clair */
  /* Même rôle que --mute, mais pour du texte sous 16px. Ajoutée le 10/09 après
     un échec Lighthouse : --mute donne 4,30 de contraste sur --pale, et le seuil
     WCAG AA est de 4,5 en dessous de 18pt (il n'est que de 3 au-dessus, d'où le
     fait que --mute reste correcte partout ailleurs). Mesuré sur --pale, le fond
     le moins favorable des deux : 5,29 ici, contre 4,30 pour --mute.
     50% et non 52% (qui suffirait, à 4,84) : une marge qui survit à un futur
     ajustement de --pale. Reste nettement plus clair que --body-ink (40%), donc
     la hiérarchie visuelle voulue est préservée.
     À utiliser pour toute nouvelle règle qui associe --mute à une petite taille.
     .article-associes-titre (blog.css) résout le même problème avec une valeur
     en dur à 46% ; elle passe AA, elle est laissée telle quelle, mais elle a
     vocation à rejoindre cette variable si on y retouche. */
  --mute-sm:  oklch(50% 0.018 240);        /* texte secondaire sous 16px */
  --mute-onDark: oklch(83% 0.03 230);      /* texte secondaire sur fond sombre (pied de page) */

  --navy:      oklch(21% 0.045 230);
  --navy-deep: oklch(17% 0.04 232);
  --btn:       oklch(32% 0.075 225);

  /* Survol des boutons. Même teinte que --btn, quatorze points de clarté
     au-dessus et une chroma plus haute : deux canaux plutôt qu'un, pour un état
     aussi franc que l'ancien --hl sans son défaut de contraste. Mesuré sur la
     page en service (22/08) : 6,6:1 avec du texte blanc, contre 4,1:1 pour --hl
     — sous le 4,5:1 exigé en 15,5 px, ce qui a motivé le changement. --hl reste
     réservé aux mots mis en évidence dans les gros titres, sur fond clair, où
     le contraste n'est pas en jeu. */
  --btn-hover: oklch(46% 0.12 225);

  --accent:    oklch(46% 0.095 228);   /* étiquettes, liens sur fond clair */
  --hl:        oklch(58% 0.145 235);   /* mise en évidence dans les gros titres */
  --accent-lt: oklch(78% 0.09 220);    /* bleu clair : hero et survols sur fond sombre */
  --badge-bg:   oklch(94% 0.035 20);   /* pastille température */
  --badge-text: oklch(52% 0.18 25);

  /* Étoiles des avis clients. Ambre volontairement hors de la palette de
     marque : c'est le repère universel d'une note, la passer au bleu du site
     ferait perdre la lecture immédiate. Seule couleur de ce fichier absente
     de la palette de l'éditeur de blocs — elle n'a pas à être appliquée à du
     texte rédigé dans wp-admin. */
  --star: oklch(80% 0.155 82);

  /* Erreur de saisie (formulaire de devis). Hors palette de marque pour la
     même raison que les étoiles : le rouge est le repère universel d'un champ
     mal rempli, le passer au bleu du site le rendrait invisible. Absente de la
     palette de l'éditeur de blocs — elle n'a rien à faire dans du texte rédigé. */
  --danger: oklch(53% 0.19 27);

  /* Fonds de page. Même hue chaude (85) et même chroma très basse sur les deux :
     l'alternance des sections doit être un changement de clarté, pas de
     température — les valeurs précédentes étaient sur deux hues différentes
     (90 pour paper, 232 pour pale), ce qui se lisait comme une salissure. Au-delà
     de ~0.003 de chroma, la chaleur devient identifiable et le fond vire au crème.
     Écart de clarté porté à 3,35 points (99,2 → 95,85) : en dessous de ~2,5, les
     bandes ne se distinguent plus au défilement. Valeur de --pale arrêtée le
     22/08 après comparaison de trois essais en HTML autonome (voir
     Test design/test-fonds-de-page-22-08-*.html). */
  --paper: oklch(99.2% 0.002 85);
  --pale:  oklch(95.85% 0.00275 85);
  --white: #fff;                    /* fond des cartes, texte sur fond sombre */

  /* Bordures maintenues dans le bleu de marque et non dans la hue chaude des
     fonds : elles côtoient le navy et l'accent, pas le papier. */
  --border:    oklch(80% 0.014 228);
  --border-dk: oklch(34% 0.03 230);

  /* Couleur de l'anneau de focus au clavier. Redéfinie dans les zones à fond
     sombre (pied de page, hero) : le bleu foncé y est invisible, alors que
     c'est le seul repère d'une personne qui navigue sans souris. */
  --focus: var(--btn);

  /* Ombres : toutes dérivées d'un même bleu-gris, à trois intensités.
     color-mix() ajoute la transparence à partir de la couleur ci-dessus —
     de cette façon, changer la teinte se répercute partout au lieu de laisser
     des valeurs figées un peu partout dans les fichiers. */
  --shadow-tint:     oklch(30% 0.04 235);
  /* 4 % → 6 % et 2px → 3px : sur un fond quasi identique au blanc des cartes,
     l'ancienne ombre ne les détachait plus de la page. */
  --shadow-soft:     0 1px 3px color-mix(in oklab, var(--shadow-tint) 6%, transparent);
  --shadow-card:     0 4px 8px color-mix(in oklab, var(--shadow-tint) 6%, transparent);
  /* 16 % → 11 % : assez pour détacher le médaillon du cadre qu'il chevauche, sans
     être trois fois plus marqué que les ombres de cartes de la même page. */
  --shadow-medallion: 0 4px 12px color-mix(in oklab, var(--shadow-tint) 11%, transparent);

  --font-head: 'Proza Libre', 'Segoe UI', system-ui, Helvetica, Arial, sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', system-ui, Helvetica, Arial, sans-serif;

  --gut: 3.75rem;       /* marge latérale, réduite aux petites largeurs */
  --r: 0.625rem;
  --chamfer: 1.375rem;   /* coin coupé des cartes de certification */
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem; line-height: 1.75;
  color: var(--body-ink); background: var(--paper);
  -webkit-font-smoothing: antialiased;

  /* Colonne verticale sur toute la hauteur de la fenêtre : combinée au
     flex-grow de <main> ci-dessous, elle évite qu'une page courte laisse le
     pied de page au milieu de l'écran avec du vide en dessous. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* scroll-margin-top: l'en-tête collant recouvrirait le haut du contenu après
   un saut par le lien d'évitement. La valeur vaut la hauteur de l'en-tête.
   outline-offset négatif : l'anneau de focus d'un bloc pleine largeur serait
   dessiné hors écran sur les côtés, on le rentre à l'intérieur. */
main { flex: 1 0 auto; scroll-margin-top: 5.625rem; }
main:focus-visible { outline-offset: -3px; }

/* :where() garde ces règles à spécificité nulle, pour qu'un composant
   (un bouton, par exemple) puisse les surcharger sans lutter. */
:where(a) { color: inherit; text-decoration: none; }
:where(h1, h2, h3, h4, p, ul, ol) { margin: 0; }
:where(ul) { list-style: none; padding: 0; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Texte réservé aux lecteurs d'écran : présent dans la page et lu à voix
   haute, mais invisible à l'œil. Sert par exemple à annoncer qu'un lien
   ouvre un nouvel onglet. Ne pas utiliser `display: none`, qui le retirerait
   aussi des lecteurs d'écran. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Lien d'évitement : invisible jusqu'à ce qu'on l'atteigne au clavier, il
   permet de sauter la navigation pour aller droit au contenu. */
.skip-link {
  position: absolute; left: -9999px;
  background: var(--navy); color: var(--white);
  padding: 0.75rem 1.25rem; z-index: 100;
  --focus: var(--paper);
}
.skip-link:focus { left: 0; top: 0; }

/* ---------- Typographie ---------- */
h1, h2, h3 {
  font-family: var(--font-head); font-weight: 600; color: var(--ink);
  letter-spacing: -0.012em; text-wrap: balance;
}
h1 { font-size: clamp(2.1875rem, 4.6vw, 3.625rem); line-height: 1.08; }
h2 { font-size: clamp(1.6875rem, 3.2vw, 2.5rem); line-height: 1.18; }
h3 { font-size: 1.3125rem; line-height: 1.3; }
h2 .hl { color: var(--hl); }

.label {
  display: block; font-family: var(--font-body);
  font-size: 0.7812rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}

.prose { font-size: 1.0938rem; line-height: 1.8; }
.prose strong { color: var(--ink); font-weight: 700; }
.measure { max-width: 43.75rem; }
.center-col { max-width: 43.75rem; margin: 0 auto; text-align: center; }

/* ---------- Contenu rédigé dans wp-admin ----------
   .prose habille ce que produit l'éditeur WordPress : mentions légales,
   politique de confidentialité, articles du blog. Sans les règles ci-dessous,
   la remise à zéro générique du haut de ce fichier s'applique aussi à ce
   contenu — listes sans puces, titres collés au texte, liens impossibles à
   distinguer du texte courant.

   Toutes les marges sont posées en haut et annulées sur le premier enfant :
   elles ne s'additionnent jamais avec l'espacement du bloc précédent. */
.prose > :first-child { margin-top: 0; }
.prose p,
.prose ul,
.prose ol,
.prose figure,
.prose table,
.prose blockquote { margin-top: 1.2em; }
.prose h2 { margin-top: 1.8em; }
.prose h3,
.prose h4 { margin-top: 1.5em; }

/* Les puces sont retirées de tout le site par :where(ul) plus haut. Il faut les
   rendre ici, sinon une liste rédigée dans l'éditeur devient une suite de
   lignes sans repère. Le retrait en marge est redonné aux deux types de liste
   à la même valeur, pour qu'elles s'alignent entre elles. */
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul,
.prose ol { padding-left: 1.4em; }
.prose li + li,
.prose li > ul,
.prose li > ol { margin-top: .4em; }

/* Même raison pour les liens : :where(a) les rend indistinguables du texte.
   Dans un contenu rédigé, un lien doit se voir sans passer la souris dessus. */
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--hl); }

.prose blockquote {
  padding-left: 1.25rem; border-left: 3px solid var(--border);
  color: var(--mute); font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin-top: 2em; }

/* Bloc à copier-coller tel quel (ex. formulaire type de rétractation) :
   détaché visuellement du reste du texte pour qu'on comprenne d'un coup
   d'œil que c'est un modèle à réutiliser, pas un paragraphe d'explication. */
.prose .cadre-copiable {
  margin-top: 1.5em; padding: 1.25rem 1.5rem; background: var(--pale);
  border: 1px solid var(--border); border-radius: 0.25rem;
}
.prose .cadre-copiable > :first-child { margin-top: 0; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9688rem; line-height: 1;
  padding: 1.0625rem 1.75rem; border: 2px solid transparent; border-radius: 0.25rem;
  background: var(--btn); color: var(--white);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
/* Survol : le simple assombrissement du fond passait inaperçu, on bascule sur
   --btn-hover (voir sa définition dans :root pour le détail du contraste).
   Aucun mouvement sur les boutons (consigne explicite) : seule la couleur
   change. Les deux variantes sur fond sombre redéfinissent leur propre survol
   juste en dessous — déclarées après, ce sont elles qui s'appliquent. */
.btn:hover { background: var(--btn-hover); }

/* CTA du hero, même famille : très légère transparence identique sur les
   deux (92 %), plutôt qu'un plein pur — laisse deviner la photo derrière
   sans nuire à la lisibilité. Couleurs différentes pour la hiérarchie :
   blanc (principal) / navy-deep (secondaire). */
.btn--onDark { background: color-mix(in oklab, var(--paper) 92%, transparent); color: var(--navy); }
.btn--onDark:hover { background: var(--accent-lt); color: var(--navy); border-color: var(--accent-lt); }

.btn--ghostDark {
  background: color-mix(in oklab, var(--navy-deep) 70%, transparent);
  color: var(--white);
  border-color: color-mix(in oklab, var(--white) 50%, transparent);
}
.btn--ghostDark:hover {
  background: var(--accent-lt); color: var(--navy); border-color: var(--accent-lt);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; }
/* Espacements récurrents. Ici et non dans la feuille de l'accueil : ils
   servent aussi à la page 404 et aux pages à venir. */
.btn-row--center { justify-content: center; margin-top: 3.5rem; }
.btn-row--spaced { margin-top: 2.5rem; }
.intro { margin-top: 1.5rem; }

/* ---------- Gabarit ---------- */
.wrap { max-width: 72.5rem; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.section { position: relative; padding-top: 4.375rem; padding-bottom: 4.375rem; }
.section--pale { background: var(--pale); }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1.75rem;
  padding: 0.875rem var(--gut);
  /* Fond plein, sans flou (26/08). L'ancienne version était translucide (94 %)
     et floutée : sur les pages à bandeau sombre, le gros titre blanc
     transperçait l'en-tête, et le flou — calculé par le GPU — se redessinait
     mal pendant le défilement sur certaines machines. L'effet ne se justifiait
     que pour un en-tête flottant au-dessus d'une photo, ce qui n'est le cas
     nulle part ici : la barre est posée sur le fond papier, avec un filet. */
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
/* 40px : le logo est un bloc large (rapport 4:1), à 56px il écrasait le reste
   de la barre. À cette hauteur il occupe 160px, l'encombrement de l'ancien. */
.site-header .logo { height: 2.5rem; width: auto; }
.main-nav ul { display: flex; gap: 2.125rem; }
/* 400 et non 500 : Proza Libre n'est chargée qu'en 400/600/700, une demande
   en 500 retombait donc sur le 400 — la valeur écrite ici est simplement celle
   qui était déjà appliquée. Vérifié le 06/09 : les six .woff2 du thème sont
   tous réellement demandés, aucun n'est à retirer. */
.main-nav a {
  font-family: var(--font-head); font-size: 1.0312rem; font-weight: 400;
  color: var(--ink); white-space: nowrap;
}
.main-nav a:hover { color: var(--accent); }
.nav-toggle { display: none; }

/* ---------- Apparition au défilement ----------
   Fondu d'apparition retiré (21/08, jugé fatigant/systématique). .reveal ne
   change plus rien visuellement — la classe reste posée dans le HTML et
   .is-visible continue d'être ajoutée par reveal.js au défilement, dont
   dépendent encore d'autres effets (filet des cartes méthode). */
.reveal { opacity: 1; transform: none; }

/* ---------- Liste d'articles — filet de secours ----------
   Habillage minimal, volontairement sommaire : sert uniquement à index.php,
   le gabarit de dernier recours (ex. archives d'auteur/date sans page
   correspondante). La vraie mise en page du blog vit dans blog.css, chargée
   sur home.php/single.php/archive.php — ces classes y sont redéfinies plus
   précisément. Le composant « conseils » de l'accueil, qui leur ressemble,
   porte des noms distincts (.conseils/.conseil) pour qu'aucun des deux ne
   déteigne sur l'autre — post_class() ajoute déjà « post » à tous les
   articles. */
.article-list { margin-top: 2.5rem; }
.article-item { padding: 1.625rem 0; border-top: 1px solid var(--border); }
.article-item h2 { font-size: 1.5rem; }
.article-item h2 a:hover { color: var(--accent); }
.article-item time { display: block; margin-top: 0.5rem; font-size: 0.875rem; color: var(--mute); }
.article-item .prose { margin-top: 0.75rem; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--navy-deep); padding: 3.875rem var(--gut) 1.75rem; --focus: var(--paper); }
.footer-inner { max-width: 72.5rem; margin: 0 auto; }
.footer-top {
  display: flex; flex-wrap: wrap; gap: 1.625rem; align-items: flex-start; justify-content: space-between;
  padding-bottom: 2rem; border-bottom: 1px solid var(--border-dk);
}
/* Le mot « procimex » écrit en texte a été remplacé par le logo blanc (06/09).
   Le nom reste en vrai texte dans la ligne « © … Procimex » plus bas, et l'alt
   de l'image le porte aussi : rien n'est perdu pour l'indexation. La baseline
   ne répète plus « punaises de lit », déjà dans le logo. */
.footer-logo { display: block; height: 2.75rem; width: auto; }
.footer-tag {
  font-size: 0.7812rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute-onDark); margin-top: 0.875rem;
}
/* Même paire de boutons que le hero (.btn--onDark / .btn--ghostDark) : appeler
   et écrire sont deux canaux de contact à poids égal, pas un principal et un
   accessoire. */
.footer-contact { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.875rem; }
.footer-btn-tel { white-space: nowrap; }
/* Liens légaux en blanc et taille lisible : à afficher clairement, pas en
   petite mention grise qu'on pourrait croire dissimulée (obligation légale,
   pas un simple copyright). */
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 0.625rem 1.5rem; align-items: baseline; justify-content: space-between;
  padding-top: 1.375rem; font-size: 0.9375rem;
}
.footer-copy { color: var(--mute-onDark); font-size: 0.8438rem; }
.footer-legal-links { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer-legal-links a { color: var(--white); font-weight: 600; }
.footer-legal-links li:not(:last-child)::after { content: "·"; margin: 0 0.75rem; color: var(--border-dk); }
.footer-bottom a:hover { color: var(--accent-lt); }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  :root { --gut: 2rem; }

  .main-nav { display: none; }
  .nav-toggle { display: block; }
  /* Bouton accordé au logo, pour que les deux blocs de la barre se lisent
     comme dessinés d'un même trait :
     - épaisseur du cadre = celle du liseré du logo. Le liseré fait 2,5 px dans
       un dessin de 70,8 px de haut ; le logo étant affiché à 40 px ici, il rend
       2,5 × 40 / 70,8 = 1,41 px. Sous 780 px le logo passe à 32 px, donc le
       cadre à 1,13 px — les deux valeurs bougent ensemble, plus bas ;
     - couleur du cadre = celle du liseré (--ink), et non le gris-bleu pâle
       d'origine : plus foncé mais plus fin, c'est ce croisement qui fait
       l'unité sans alourdir ;
     - hauteur du cadre = hauteur du logo, angles vifs comme lui ;
     - libellé dans la typographie du MOT du logo — Proza Libre 600, même
       interlettrage, même hauteur de capitale — et non celle du sous-titre :
       deux caractères différents dans un ensemble censé n'en faire qu'un se
       voient tout de suite. */
  .nav-toggle summary {
    list-style: none; cursor: pointer; position: relative;
    box-sizing: border-box; height: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    /* Proza Libre 600 et interlettrage .14em : exactement le réglage du mot
       PROCIMEX, pas celui du sous-titre. Corps calé sur la hauteur de capitale
       du logo — dans le dessin, PROCIMEX fait 44 sur 70,8 de haut, soit 24,8 px
       quand le logo est affiché à 40 (et 19,8 px quand il est à 32, plus bas).
       Les deux mots se lisent alors à la même taille optique. */
    font-family: var(--font-head); font-size: 1.55rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; line-height: 1;
        /* Le trait est peint en box-shadow interne et non en border : Chromium
       tronque toute épaisseur de bordure au pixel entier (1,5 px devient 1 px),
       là où le liseré du logo, qui est une forme mise à l'échelle, se peint
       sans arrondi. La box-shadow, elle, accepte les fractions — c'est le seul
       moyen d'obtenir exactement la même épaisseur des deux côtés. */
    color: var(--ink); border: 0; border-radius: 0;
    --trait: 1.5px;
    box-shadow: inset 0 0 0 var(--trait) var(--ink);
    /* l'interlettrage ajoute aussi un espace après le dernier U : la moitié
       est reprise à gauche, sinon le mot paraît décalé dans son cadre */
    /* Centrage sur les CAPITALES, et non sur la ligne de texte. Avec un simple
       align-items: center, le navigateur centre la boîte de ligne, qui réserve
       de la place sous la ligne de base pour les jambages (p, q, g) — absents
       d'un mot tout en capitales. MENU se retrouvait donc trop haut d'environ
       0,9 px. Métriques de Proza Libre : ligne de base à 0,8125 em, capitale à
       0,7153 em ; l'écart à rattraper vaut (1 + 0,7153 − 2 × 0,8125) / 2 =
       0,0452 em, et un padding haut du double décale le centre d'autant.
       Exprimé en em : suit automatiquement le changement de corps à 780 px. */
    padding: 0.0904em 0.875rem 0 calc(0.875rem + .14em);
  }
  /* Le cadre suit la hauteur du logo et descend donc sous les 44 px
     recommandés pour une cible tactile : la zone cliquable est réétendue
     autour, sans déplacer le trait. */
  .nav-toggle summary::after { content: ""; position: absolute; inset: -2px -4px; }
  .nav-toggle summary::-webkit-details-marker { display: none; }
  .nav-toggle[open] summary {
    box-shadow: inset 0 0 0 var(--trait) var(--accent); color: var(--accent);
  }
  .nav-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--border);
    padding: 0.75rem var(--gut) 1.625rem;
  }
  .nav-panel ul { display: flex; flex-direction: column; }
  .nav-panel ul a {
    display: block; padding: 0.9375rem 0;
    font-family: var(--font-head); font-size: 1.125rem; color: var(--ink);
    border-bottom: 1px solid var(--border);
  }
  .nav-panel .btn { margin-top: 1.375rem; width: 100%; }
}

@media (max-width: 780px) {
  :root { --gut: 1.375rem; --chamfer: 1.125rem; }
  body { font-size: 1.0312rem; }
  .section { padding-top: 4rem; padding-bottom: 4rem; }
  .center-col { text-align: left; margin-left: 0; margin-right: 0; }
  .footer-contact { justify-content: flex-start; }
  .site-header .logo { height: 2rem; }
  .footer-logo { height: 2.25rem; }
  /* voir le commentaire du bouton plus haut : le logo passant à 32 px, son
     liseré rend 1,13 px, et le cadre du bouton suit. */
  .nav-toggle summary { height: 2rem; --trait: 1px; font-size: 1.24rem; }
  .nav-toggle summary::after { inset: -6px -4px; }
}

/* Respecte le réglage système « réduire les animations ».

   Les délais comptent autant que les durées : sans les annuler, les boutons du
   hero resteraient invisibles une demi-seconde avant d'apparaître d'un coup, et
   les cartes attendraient leur tour en cascade — exactement ce que le réglage
   cherche à éviter. Le décalage des cartes est écrit en style en ligne par
   reveal.js : le !important est le seul moyen de le neutraliser depuis le CSS. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
  }
}

/* ----------------------------------------------------------------------
   Bandeau de consentement CookieYes (09/09)

   Le plugin écrit ses couleurs en style en ligne sur chaque élément (relevé
   le 09/09 : background-color sur .cky-consent-bar, color/border-color sur
   les trois boutons…), donc rien ne les surcharge sans !important. Ce n'est
   pas un choix de confort : c'est la seule prise depuis une feuille de style.

   La police n'est pas reprise ici — le plugin utilise déjà Open Sans, celle
   du site.

   Fragilité assumée : ces classes appartiennent à CookieYes. Une mise à jour
   qui les renomme fera réapparaître le bleu d'origine (#1863DC) sans rien
   casser d'autre. À revérifier après chaque mise à jour du plugin.
   ---------------------------------------------------------------------- */
.cky-consent-bar,
.cky-preference-center {
  background-color: var(--paper) !important;
  border-color: var(--border) !important;
}

.cky-title,
.cky-notice-des,
.cky-notice-des p,
.cky-preference-title,
.cky-preference-content-wrapper,
.cky-accordion-btn,
.cky-accordion-header-des {
  color: var(--ink) !important;
}

/* Boutons : même hiérarchie que les .btn du site — action principale en
   aplat, les deux autres en contour sur fond transparent. */
.cky-btn-accept {
  background-color: var(--btn) !important;
  border-color: var(--btn) !important;
  color: var(--white) !important;
}

.cky-btn-reject,
.cky-btn-customize,
.cky-btn-preferences {
  border-color: var(--btn) !important;
  color: var(--btn) !important;
}

.cky-btn-accept:hover {
  background-color: var(--btn-hover) !important;
  border-color: var(--btn-hover) !important;
}

.cky-btn-reject:hover,
.cky-btn-customize:hover,
.cky-btn-preferences:hover {
  background-color: color-mix(in oklab, var(--btn) 8%, transparent) !important;
}

/* Interrupteur des catégories : gris au repos (valeur du plugin), accent du
   site une fois actif. */
.cky-switch input:checked {
  background-color: var(--accent) !important;
}

.cky-always-active {
  color: var(--accent) !important;
}