/* =====================================================================
   CLINIQUE JURIDIQUE DES YVELINES — FEUILLE DE STYLE DU SITE PUBLIC
   ---------------------------------------------------------------------
   Ce fichier ne contient AUCUNE couleur ni taille en dur : toutes les
   valeurs proviennent de tokens.css. Pour changer l'apparence du site,
   modifiez tokens.css, pas ce fichier.

   SOMMAIRE
     1.  Réinitialisation et base
     2.  Typographie
     3.  Liens
     4.  Conteneurs et sections
     5.  Grilles
     6.  Boutons
     7.  Étiquettes et pastilles
     8.  Cartes
     9.  Messages (succès, erreur, information)
    10.  Formulaires
    11.  Bandeau de fermeture estivale
    12.  En-tête et navigation
    13.  Menu mobile
    14.  Pied de page
    15.  Page d'accueil — bandeau d'ouverture
    16.  Page d'accueil — sections
    17.  Grille des domaines
    18.  Étapes de la démarche
    19.  Page Nos compétences
    20.  Page Nos partenaires
    21.  Page Actualités
    22.  Page La Clinique
    23.  Page Nous rejoindre
    24.  Page Contact
    25.  Pages légales et contenu long
    26.  Pages d'erreur
    27.  Utilitaires
    28.  Animations à l'apparition
    29.  Adaptations responsives
    30.  Impression
   ===================================================================== */


/* =====================================================================
   1. RÉINITIALISATION ET BASE
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Décale l'arrivée des ancres pour que le titre ne passe pas sous
     l'en-tête fixe — utilisé par les liens depuis la page d'accueil
     vers un domaine précis de la page Nos compétences. */
  scroll-padding-top: calc(var(--cjy-hauteur-entete) + var(--cjy-esp-lg));
}

body {
  min-height: 100vh;
  background-color: var(--cjy-fond);
  color: var(--cjy-texte);
  font-family: var(--cjy-police-texte);
  font-size: var(--cjy-txt-md);
  font-weight: var(--cjy-graisse-normale);
  line-height: var(--cjy-interligne-texte);
  letter-spacing: var(--cjy-lettrage-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Les pictogrammes sont dessinés en traits : leur remplissage est défini
   sur chaque forme par un attribut « fill », qu'il ne faut pas écraser
   ici — sans quoi les cercles et rectangles se retrouvent pleins. */
svg {
  flex: none;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: none;
  border-top: 1px solid var(--cjy-bordure);
  margin: var(--cjy-esp-lg) 0;
}

::selection {
  background-color: var(--cjy-selection-fond);
  color: var(--cjy-selection-texte);
}


/* ---------------------------------------------------------------------
   Barre de défilement
   ---------------------------------------------------------------------
   Deux syntaxes coexistent : la norme (Firefox) et celle de WebKit
   (Chrome, Edge, Safari). Les couleurs viennent toutes de tokens.css et
   s'adaptent aux zones sombres, qui redéfinissent --cjy-barre-*.
   --------------------------------------------------------------------- */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--cjy-barre-pouce) var(--cjy-barre-piste);
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: var(--cjy-barre-largeur);
  height: var(--cjy-barre-largeur);
}

::-webkit-scrollbar-track {
  background-color: var(--cjy-barre-piste);
}

::-webkit-scrollbar-thumb {
  background-color: var(--cjy-barre-pouce);
  border-radius: var(--cjy-arrondi-plein);
  /* La bordure de la couleur de la piste crée une marge autour du pouce :
     il paraît plus fin et mieux posé qu'un rectangle plein. */
  border: var(--cjy-barre-bordure) solid var(--cjy-barre-piste);
  background-clip: padding-box;
  transition: background-color var(--cjy-transition);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--cjy-barre-pouce-survol);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--cjy-accent-fonce);
}

/* L'angle entre les deux barres, sinon rendu en gris système. */
::-webkit-scrollbar-corner {
  background-color: var(--cjy-barre-piste);
}

/* Zones à défilement interne : barre plus discrète encore. */
.defilement-x::-webkit-scrollbar,
.sommaire__liste::-webkit-scrollbar,
.tableau-enveloppe::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Anneau de focus visible uniquement au clavier. */
:focus-visible {
  outline: var(--cjy-focus-epaisseur) solid var(--cjy-focus);
  outline-offset: var(--cjy-focus-ecart);
  border-radius: var(--cjy-arrondi-xs);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Lien d'évitement pour la navigation au clavier et les lecteurs d'écran. */
.lien-evitement {
  position: absolute;
  top: var(--cjy-esp-2xs);
  left: var(--cjy-esp-2xs);
  z-index: var(--cjy-plan-message);
  padding: var(--cjy-esp-xs) var(--cjy-esp-sm);
  background-color: var(--cjy-accent);
  color: var(--cjy-accent-contraste);
  font-size: var(--cjy-txt-sm);
  font-weight: var(--cjy-graisse-demi);
  border-radius: var(--cjy-arrondi-sm);
  transform: translateY(-200%);
  transition: transform var(--cjy-transition);
}

.lien-evitement:focus {
  transform: translateY(0);
}

/* Contenu réservé aux lecteurs d'écran. */
.hors-ecran {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =====================================================================
   2. TYPOGRAPHIE
   ===================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cjy-police-titre);
  font-variation-settings: var(--cjy-titre-variation);
  font-weight: var(--cjy-graisse-demi);
  line-height: var(--cjy-interligne-titre);
  letter-spacing: var(--cjy-lettrage-titre);
  color: var(--cjy-texte);
  text-wrap: balance;
}

h1 { font-size: var(--cjy-titre-1); }
h2 { font-size: var(--cjy-titre-2); }
h3 { font-size: var(--cjy-titre-3); }
h4 { font-size: var(--cjy-titre-4); font-weight: var(--cjy-graisse-demi); }
h5 { font-size: var(--cjy-titre-5); }
h6 { font-size: var(--cjy-titre-6); }

p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--cjy-esp-sm);
}

strong, b {
  font-weight: var(--cjy-graisse-demi);
  color: var(--cjy-texte);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--cjy-txt-sm);
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  cursor: help;
}

blockquote {
  padding-left: var(--cjy-esp-md);
  border-left: 2px solid var(--cjy-accent);
  font-family: var(--cjy-police-titre);
  font-variation-settings: var(--cjy-titre-variation);
  font-size: var(--cjy-txt-xl);
  line-height: var(--cjy-interligne-sous);
  color: var(--cjy-texte);
}

code, kbd, samp {
  font-family: var(--cjy-police-mono);
  font-size: 0.92em;
}

/* --- Éléments typographiques récurrents ------------------------------ */

/* Petite ligne en capitales au-dessus d'un titre de section. */
.surtitre {
  display: block;
  margin-bottom: var(--cjy-esp-xs);
  font-family: var(--cjy-police-texte);
  font-size: var(--cjy-txt-xs);
  font-weight: var(--cjy-graisse-demi);
  letter-spacing: var(--cjy-lettrage-surtitre);
  text-transform: uppercase;
  color: var(--cjy-texte-tenu);
}

/* Variante avec un court filet à gauche. */
/* Le filet reste aligné sur la PREMIÈRE ligne du surtitre, même lorsque
   celui-ci passe sur deux lignes sur les écrans étroits. */
.surtitre--filet {
  display: flex;
  align-items: flex-start;
  gap: var(--cjy-esp-xs);
}

.surtitre--filet::before {
  content: '';
  width: 28px;
  height: 1px;
  margin-top: 0.62em;
  background-color: var(--cjy-bordure-forte);
  flex: none;
}

.chapo {
  max-width: var(--cjy-mesure);
  font-size: var(--cjy-txt-lg);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte-doux);
}

.texte-doux { color: var(--cjy-texte-doux); }
.texte-tenu { color: var(--cjy-texte-tenu); }

.mesure       { max-width: var(--cjy-mesure); }
.mesure-courte { max-width: var(--cjy-mesure-courte); }


/* =====================================================================
   3. LIENS
   ===================================================================== */

a {
  color: var(--cjy-lien);
  text-decoration: none;
  transition: color var(--cjy-transition-rapide);
}

a:hover {
  color: var(--cjy-lien-survol);
}

/* Lien à l'intérieur d'un paragraphe : souligné, avec un soulignement
   qui s'épaissit au survol plutôt que de disparaître. */
.contenu-texte a,
.lien-souligne {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--cjy-bordure-accent);
  transition: text-decoration-color var(--cjy-transition-rapide),
              color var(--cjy-transition-rapide);
}

.contenu-texte a:hover,
.lien-souligne:hover {
  text-decoration-color: currentColor;
}

/* Lien fléché discret, utilisé en fin de carte ou de section. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--cjy-esp-2xs);
  font-size: var(--cjy-txt-base);
  font-weight: var(--cjy-graisse-moyenne);
  color: var(--cjy-accent);
}

.lien-fleche::after {
  content: '';
  width: 14px;
  height: 9px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M9.4 0 8.35 1.05 13.05 5.75H0v1.5h13.05L8.35 12l1.05 1.05L15.9 6.5z' transform='translate(-1 -2)'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M9.4 0 8.35 1.05 13.05 5.75H0v1.5h13.05L8.35 12l1.05 1.05L15.9 6.5z' transform='translate(-1 -2)'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--cjy-transition);
}

.lien-fleche:hover::after {
  transform: translateX(4px);
}


/* =====================================================================
   4. CONTENEURS ET SECTIONS
   ===================================================================== */

.conteneur {
  width: 100%;
  max-width: var(--cjy-largeur-max);
  margin-inline: auto;
  padding-inline: var(--cjy-gouttiere);
}

.conteneur--etroit { max-width: calc(var(--cjy-largeur-etroite) + var(--cjy-gouttiere) * 2); }
.conteneur--large  { max-width: var(--cjy-largeur-large); }

.section {
  padding-block: var(--cjy-section-y);
}

.section--serree { padding-block: calc(var(--cjy-section-y) * 0.62); }
.section--ample  { padding-block: var(--cjy-section-y-large); }

.section--alt {
  background-color: var(--cjy-fond-alt);
}

.section--filet-haut  { border-top: 1px solid var(--cjy-bordure); }
.section--filet-bas   { border-bottom: 1px solid var(--cjy-bordure); }

.section--sombre {
  background-color: var(--cjy-fond-profond);
  color: var(--cjy-texte-inverse);
}

/* En-tête de section : surtitre, titre, texte d'introduction. */
.section-entete {
  max-width: var(--cjy-mesure);
  margin-bottom: var(--cjy-esp-xl);
}

.section-entete--centre {
  margin-inline: auto;
  text-align: center;
}

.section-entete--centre .surtitre--filet {
  justify-content: center;
}

.section-entete__titre {
  font-size: var(--cjy-titre-2);
}

.section-entete__texte {
  margin-top: var(--cjy-esp-sm);
  font-size: var(--cjy-txt-lg);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte-doux);
}

/* En-tête de page : le bloc titre qui ouvre chaque page intérieure. */
.page-entete {
  padding-top: calc(var(--cjy-hauteur-entete) + var(--cjy-esp-2xl));
  padding-bottom: var(--cjy-esp-2xl);
  border-bottom: 1px solid var(--cjy-bordure);
  background-color: var(--cjy-fond-alt);
}

.page-entete__contenu {
  max-width: var(--cjy-mesure);
}

.page-entete__titre {
  font-size: var(--cjy-titre-1);
}

.page-entete__texte {
  margin-top: var(--cjy-esp-md);
  font-size: var(--cjy-txt-lg);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte-doux);
  max-width: var(--cjy-mesure);
}


/* =====================================================================
   5. GRILLES
   ===================================================================== */

.grille {
  display: grid;
  gap: var(--cjy-esp-md);
}

.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Grille qui se réorganise seule selon la largeur disponible. */
.grille--auto {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.grille--auto-large {
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}

.grille--serree { gap: var(--cjy-esp-sm); }
.grille--aeree  { gap: var(--cjy-esp-lg); }

/* Mise en page à deux colonnes : contenu principal + colonne latérale. */
.colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: var(--cjy-esp-xl);
  align-items: start;
}

.colonnes--inverse {
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
}


/* =====================================================================
   6. BOUTONS
   ===================================================================== */

/* ---------------------------------------------------------------------
   Le bouton réagit en trois dimensions : il s'incline vers le curseur,
   se soulève, laisse passer un reflet, puis s'enfonce au clic.

   Les variables --pointeur-x / --pointeur-y sont posées par site.js à
   partir de la position du curseur ; elles valent 0.5 au repos, ce qui
   annule l'inclinaison. Sans JavaScript, seuls le soulèvement et le
   reflet subsistent : le bouton reste parfaitement utilisable.
   --------------------------------------------------------------------- */

.bouton {
  --pointeur-x: 0.5;
  --pointeur-y: 0.5;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cjy-esp-2xs);
  padding: 0.78rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--cjy-arrondi-md);
  background-color: var(--cjy-accent);
  color: var(--cjy-accent-contraste);
  font-family: var(--cjy-police-texte);
  font-size: var(--cjy-txt-base);
  font-weight: var(--cjy-graisse-moyenne);
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transform: perspective(var(--cjy-perspective));
  transition: background-color var(--cjy-transition),
              border-color var(--cjy-transition),
              color var(--cjy-transition),
              transform var(--cjy-duree-lente) var(--cjy-courbe-sortie),
              box-shadow var(--cjy-duree-lente) var(--cjy-courbe-sortie);
}

/* Reflet diagonal qui balaie le bouton au survol. */
.bouton::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 20%,
    var(--cjy-reflet) 48%,
    transparent 76%
  );
  transform: translateX(-120%);
  transition: transform 620ms var(--cjy-courbe-sortie);
  pointer-events: none;
}

.bouton:hover::before,
.bouton:focus-visible::before {
  transform: translateX(120%);
}

.bouton:hover,
.bouton:focus-visible {
  background-color: var(--cjy-accent-fonce);
  color: var(--cjy-accent-contraste);
  box-shadow: var(--cjy-ombre-relief);
  transform:
    perspective(var(--cjy-perspective))
    translateY(calc(var(--cjy-relief-elevation) * -1))
    rotateX(calc((var(--pointeur-y) - 0.5) * var(--cjy-relief-angle) * -2))
    rotateY(calc((var(--pointeur-x) - 0.5) * var(--cjy-relief-angle) * 2));
}

.bouton:active {
  box-shadow: var(--cjy-ombre-xs);
  transform:
    perspective(var(--cjy-perspective))
    translateY(var(--cjy-relief-enfoncement))
    scale(0.985);
  transition-duration: var(--cjy-transition-rapide);
}

.bouton:disabled,
.bouton[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.bouton:disabled::before,
.bouton[aria-disabled='true']::before {
  display: none;
}

/* Le pictogramme d'un bouton avance légèrement avec lui. */
.bouton svg {
  transition: transform var(--cjy-duree-lente) var(--cjy-courbe-ressort);
}

.bouton:hover svg {
  transform: translateX(2px);
}

/* --- Variantes -------------------------------------------------------- */

/* Sur les boutons clairs, un reflet blanc serait invisible : on le
   remplace par un voile sombre très léger. */
.bouton--secondaire,
.bouton--clair {
  --cjy-reflet: rgba(28, 36, 48, 0.06);
}

.bouton--secondaire {
  background-color: transparent;
  border-color: var(--cjy-bordure-forte);
  color: var(--cjy-texte);
}

.bouton--secondaire:hover,
.bouton--secondaire:focus-visible {
  background-color: var(--cjy-fond-alt);
  border-color: var(--cjy-texte-doux);
  color: var(--cjy-texte);
  box-shadow: var(--cjy-ombre-md);
}

/* Bouton discret : il se soulève sans ombre portée ni reflet. */
.bouton--fantome {
  background-color: transparent;
  color: var(--cjy-accent);
  padding-inline: var(--cjy-esp-xs);
  overflow: visible;
}

.bouton--fantome::before {
  display: none;
}

.bouton--fantome:hover,
.bouton--fantome:focus-visible {
  background-color: var(--cjy-accent-tres-clair);
  color: var(--cjy-accent-fonce);
  box-shadow: none;
}

.bouton--clair {
  background-color: var(--cjy-surface);
  border-color: var(--cjy-bordure);
  color: var(--cjy-texte);
}

.bouton--clair:hover {
  background-color: var(--cjy-fond-alt);
  color: var(--cjy-texte);
}

.bouton--danger {
  background-color: var(--cjy-erreur);
  color: #FFFFFF;
}

.bouton--danger:hover {
  background-color: #73302B;
  color: #FFFFFF;
}

/* --- Tailles ---------------------------------------------------------- */

.bouton--sm {
  padding: 0.5rem 1rem;
  font-size: var(--cjy-txt-sm);
}

.bouton--lg {
  padding: 0.95rem 2rem;
  font-size: var(--cjy-txt-md);
}

.bouton--bloc {
  display: flex;
  width: 100%;
}

/* Groupe de boutons côte à côte, qui passent en colonne sur mobile. */
.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cjy-esp-xs);
}

.boutons--centre { justify-content: center; }


/* =====================================================================
   7. ÉTIQUETTES ET PASTILLES
   ===================================================================== */

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.28em 0.7em;
  border-radius: var(--cjy-arrondi-plein);
  background-color: var(--cjy-accent-clair);
  color: var(--cjy-accent);
  font-size: var(--cjy-txt-xs);
  font-weight: var(--cjy-graisse-moyenne);
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}

.etiquette--neutre {
  background-color: var(--cjy-fond-creux);
  color: var(--cjy-texte-doux);
}

.etiquette--contour {
  background-color: transparent;
  border: 1px solid var(--cjy-bordure);
  color: var(--cjy-texte-doux);
}

.etiquette--succes { background-color: var(--cjy-succes-fond); color: var(--cjy-succes); }
.etiquette--alerte { background-color: var(--cjy-alerte-fond); color: var(--cjy-alerte); }
.etiquette--erreur { background-color: var(--cjy-erreur-fond); color: var(--cjy-erreur); }

/* Petit point coloré précédant le texte d'une étiquette. */
.etiquette__point {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex: none;
}


/* =====================================================================
   8. CARTES
   ===================================================================== */

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--cjy-esp-md);
  background-color: var(--cjy-surface);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-lg);
  transition: border-color var(--cjy-transition),
              box-shadow var(--cjy-transition),
              transform var(--cjy-transition);
}

.carte--cliquable {
  cursor: pointer;
}

.carte--cliquable:hover {
  border-color: var(--cjy-bordure-accent);
  box-shadow: var(--cjy-ombre-relief);
  transform: translateY(-4px);
}

/* Rend toute la carte cliquable à partir d'un seul lien, sans imbriquer
   de balises interactives les unes dans les autres. */
.carte__lien-etendu::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.carte__entete {
  display: flex;
  align-items: flex-start;
  gap: var(--cjy-esp-xs);
  margin-bottom: var(--cjy-esp-xs);
}

.carte__titre {
  font-size: var(--cjy-titre-5);
  line-height: var(--cjy-interligne-sous);
}

.carte__texte {
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-texte);
  color: var(--cjy-texte-doux);
}

.carte__pied {
  margin-top: auto;
  padding-top: var(--cjy-esp-sm);
}

/* Carte plate, sans fond ni ombre : simple filet de séparation. */
.carte--plate {
  background-color: transparent;
  border: none;
  border-top: 1px solid var(--cjy-bordure);
  border-radius: 0;
  padding-inline: 0;
}


/* =====================================================================
   9. MESSAGES
   ===================================================================== */

.messages {
  position: relative;
  z-index: var(--cjy-plan-flottant);
}

.message {
  display: flex;
  align-items: flex-start;
  gap: var(--cjy-esp-xs);
  padding: var(--cjy-esp-sm) var(--cjy-esp-md);
  border: 1px solid var(--cjy-info-bordure);
  border-left-width: 3px;
  border-radius: var(--cjy-arrondi-md);
  background-color: var(--cjy-info-fond);
  color: var(--cjy-info);
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-serre);
}

.message + .message {
  margin-top: var(--cjy-esp-2xs);
}

.message--success { background-color: var(--cjy-succes-fond); border-color: var(--cjy-succes-bordure); color: var(--cjy-succes); }
.message--error   { background-color: var(--cjy-erreur-fond); border-color: var(--cjy-erreur-bordure); color: var(--cjy-erreur); }
.message--warning { background-color: var(--cjy-alerte-fond); border-color: var(--cjy-alerte-bordure); color: var(--cjy-alerte); }
.message--info    { background-color: var(--cjy-info-fond);   border-color: var(--cjy-info-bordure);   color: var(--cjy-info); }

.message__icone {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.15em;
}

.message__texte {
  flex: 1;
  min-width: 0;
}

.message__fermer {
  flex: none;
  margin-left: auto;
  padding: 0.15rem;
  color: inherit;
  opacity: 0.6;
  border-radius: var(--cjy-arrondi-sm);
  transition: opacity var(--cjy-transition-rapide);
}

.message__fermer:hover {
  opacity: 1;
}

/* Encadré d'information dans le corps d'une page. */
.encart {
  padding: var(--cjy-esp-md);
  background-color: var(--cjy-fond-alt);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-lg);
}

.encart--accent {
  background-color: var(--cjy-accent-clair);
  border-color: var(--cjy-info-bordure);
}

.encart--alerte {
  background-color: var(--cjy-alerte-fond);
  border-color: var(--cjy-alerte-bordure);
}

.encart__titre {
  margin-bottom: var(--cjy-esp-2xs);
  font-size: var(--cjy-titre-6);
  font-family: var(--cjy-police-texte);
  font-weight: var(--cjy-graisse-demi);
  letter-spacing: 0;
}

.encart__texte {
  font-size: var(--cjy-txt-base);
  color: var(--cjy-texte-doux);
}

/* Encadré introduit par un pictogramme aligné sur le titre. */
.encart__avec-icone {
  display: flex;
  gap: var(--cjy-esp-xs);
}

.encart__icone {
  flex: none;
  color: var(--cjy-alerte);
}

.encart__titre--large {
  font-size: var(--cjy-titre-5);
  font-family: var(--cjy-police-titre);
  font-variation-settings: var(--cjy-titre-variation);
  letter-spacing: var(--cjy-lettrage-titre);
}


/* =====================================================================
   10. FORMULAIRES
   ===================================================================== */

.formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--cjy-esp-md);
}

.champs {
  display: grid;
  gap: var(--cjy-esp-md);
}

.champs--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--cjy-esp-3xs);
  min-width: 0;
}

.champ__etiquette {
  display: flex;
  align-items: center;
  gap: var(--cjy-esp-3xs);
  font-size: var(--cjy-txt-sm);
  font-weight: var(--cjy-graisse-moyenne);
  color: var(--cjy-texte);
  letter-spacing: 0.005em;
}

.champ__obligatoire {
  color: var(--cjy-erreur);
  font-weight: var(--cjy-graisse-normale);
}

.champ__facultatif {
  margin-left: auto;
  font-size: var(--cjy-txt-xs);
  font-weight: var(--cjy-graisse-normale);
  color: var(--cjy-texte-tenu);
}

.champ__aide {
  font-size: var(--cjy-txt-xs);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte-tenu);
}

.champ__erreur {
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
  font-size: var(--cjy-txt-xs);
  font-weight: var(--cjy-graisse-moyenne);
  color: var(--cjy-erreur);
}

/* --- Contrôles de saisie ---------------------------------------------- */

.saisie,
.zone-texte,
.liste-deroulante {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background-color: var(--cjy-surface);
  border: 1px solid var(--cjy-bordure-forte);
  border-radius: var(--cjy-arrondi-md);
  color: var(--cjy-texte);
  font-family: var(--cjy-police-texte);
  font-size: var(--cjy-txt-base);
  line-height: 1.5;
  transition: border-color var(--cjy-transition-rapide),
              box-shadow var(--cjy-transition-rapide),
              background-color var(--cjy-transition-rapide);
}

.saisie::placeholder,
.zone-texte::placeholder {
  color: var(--cjy-texte-tenu);
  opacity: 1;
}

.saisie:hover,
.zone-texte:hover,
.liste-deroulante:hover {
  border-color: var(--cjy-bordure-accent);
}

.saisie:focus,
.zone-texte:focus,
.liste-deroulante:focus {
  outline: none;
  border-color: var(--cjy-accent);
  box-shadow: 0 0 0 3px var(--cjy-focus-halo);
}

.saisie:disabled,
.zone-texte:disabled,
.liste-deroulante:disabled {
  background-color: var(--cjy-fond-creux);
  color: var(--cjy-texte-tenu);
  cursor: not-allowed;
}

.saisie--erreur,
.zone-texte--erreur,
.liste-deroulante--erreur {
  border-color: var(--cjy-erreur);
}

.saisie--erreur:focus,
.zone-texte--erreur:focus,
.liste-deroulante--erreur:focus {
  box-shadow: 0 0 0 3px rgba(139, 58, 52, 0.16);
}

.zone-texte {
  min-height: 10rem;
  resize: vertical;
}

/* Flèche de la liste déroulante dessinée en CSS pour rester cohérente
   d'un navigateur à l'autre. */
.liste-deroulante {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235A6675' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* --- Cases à cocher ---------------------------------------------------- */

.case {
  display: flex;
  align-items: flex-start;
  gap: var(--cjy-esp-2xs);
  cursor: pointer;
}

.case__controle {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.16em;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--cjy-surface);
  border: 1px solid var(--cjy-bordure-forte);
  border-radius: var(--cjy-arrondi-xs);
  cursor: pointer;
  transition: background-color var(--cjy-transition-rapide),
              border-color var(--cjy-transition-rapide);
}

.case__controle:hover {
  border-color: var(--cjy-accent);
}

.case__controle:checked {
  background-color: var(--cjy-accent);
  border-color: var(--cjy-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 7.4 2.8 2.8L11 4.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

.case__controle:focus-visible {
  outline: var(--cjy-focus-epaisseur) solid var(--cjy-focus);
  outline-offset: var(--cjy-focus-ecart);
}

.case__texte {
  font-size: var(--cjy-txt-sm);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte-doux);
}

/* --- Bulle d'aide au survol -------------------------------------------- */
/*  Utilisée par le point d'interrogation à côté du champ « téléphone ».   */

.info-bulle {
  position: relative;
  display: inline-flex;
}

.info-bulle__declencheur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--cjy-bordure-forte);
  border-radius: 50%;
  background-color: transparent;
  color: var(--cjy-texte-tenu);
  font-family: var(--cjy-police-texte);
  font-size: 10px;
  font-weight: var(--cjy-graisse-forte);
  line-height: 1;
  cursor: help;
  transition: background-color var(--cjy-transition-rapide),
              border-color var(--cjy-transition-rapide),
              color var(--cjy-transition-rapide);
}

.info-bulle__declencheur:hover,
.info-bulle__declencheur:focus-visible {
  background-color: var(--cjy-accent);
  border-color: var(--cjy-accent);
  color: var(--cjy-accent-contraste);
}

.info-bulle__contenu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: var(--cjy-plan-flottant);
  width: max-content;
  max-width: min(280px, 78vw);
  padding: var(--cjy-esp-2xs) var(--cjy-esp-xs);
  background-color: var(--cjy-fond-profond);
  color: var(--cjy-texte-inverse);
  border-radius: var(--cjy-arrondi-md);
  box-shadow: var(--cjy-ombre-lg);
  font-size: var(--cjy-txt-xs);
  font-weight: var(--cjy-graisse-normale);
  line-height: 1.5;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity var(--cjy-transition),
              transform var(--cjy-transition),
              visibility var(--cjy-transition);
  pointer-events: none;
}

/* Petite pointe sous la bulle. */
.info-bulle__contenu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--cjy-fond-profond);
}

.info-bulle:hover .info-bulle__contenu,
.info-bulle__declencheur:focus-visible + .info-bulle__contenu,
.info-bulle__declencheur[aria-expanded='true'] + .info-bulle__contenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* --- Suggestions sous un champ de saisie libre ------------------------ */
/*  Les domaines de la Clinique sont proposés comme exemples : un clic
    remplit le champ, que le visiteur reste libre de reformuler.         */

.suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cjy-esp-3xs);
  margin-top: var(--cjy-esp-3xs);
}

.suggestions__intitule {
  font-size: var(--cjy-txt-xs);
  color: var(--cjy-texte-tenu);
  margin-right: var(--cjy-esp-3xs);
}

.suggestions__choix {
  padding: 0.25em 0.7em;
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-plein);
  background-color: transparent;
  color: var(--cjy-texte-doux);
  font-family: var(--cjy-police-texte);
  font-size: var(--cjy-txt-xs);
  line-height: 1.5;
  cursor: pointer;
  transition: background-color var(--cjy-transition),
              border-color var(--cjy-transition),
              color var(--cjy-transition),
              transform var(--cjy-duree-lente) var(--cjy-courbe-ressort);
}

.suggestions__choix:hover,
.suggestions__choix:focus-visible {
  background-color: var(--cjy-accent-clair);
  border-color: var(--cjy-bordure-accent);
  color: var(--cjy-accent);
  transform: translateY(-1px);
}

.suggestions__choix.est-retenu {
  background-color: var(--cjy-accent);
  border-color: var(--cjy-accent);
  color: var(--cjy-accent-contraste);
}


/* --- Zone de dépôt des pièces jointes --------------------------------- */

.depot {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--cjy-esp-xs);
  padding: var(--cjy-esp-md);
  border: 1px dashed var(--cjy-bordure-forte);
  border-radius: var(--cjy-arrondi-lg);
  background-color: var(--cjy-fond-alt);
  color: var(--cjy-texte-doux);
  cursor: pointer;
  transition: border-color var(--cjy-transition),
              background-color var(--cjy-transition),
              transform var(--cjy-duree-lente) var(--cjy-courbe-sortie);
}

.depot:hover,
.depot.est-survolee {
  border-color: var(--cjy-accent);
  background-color: var(--cjy-accent-tres-clair);
}

.depot.est-survolee {
  transform: scale(1.01);
}

/* Le champ natif couvre toute la zone : le visiteur peut cliquer
   n'importe où, et le glisser-déposer fonctionne sans JavaScript. */
.depot__champ {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.depot__champ:focus-visible + .depot__icone {
  outline: var(--cjy-focus-epaisseur) solid var(--cjy-focus);
  outline-offset: var(--cjy-focus-ecart);
  border-radius: var(--cjy-arrondi-sm);
}

.depot__icone {
  flex: none;
  color: var(--cjy-accent);
}

.depot__texte {
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-serre);
}

.depot__texte strong {
  color: var(--cjy-accent);
  font-weight: var(--cjy-graisse-demi);
}

/* --- Liste des fichiers retenus ---------------------------------------- */

.depot__liste {
  display: flex;
  flex-direction: column;
  gap: var(--cjy-esp-3xs);
  margin-top: var(--cjy-esp-2xs);
}

.piece {
  display: flex;
  align-items: center;
  gap: var(--cjy-esp-2xs);
  padding: var(--cjy-esp-2xs) var(--cjy-esp-xs);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-md);
  background-color: var(--cjy-surface);
  animation: apparition 320ms var(--cjy-courbe-sortie) both;
}

.piece__icone {
  flex: none;
  color: var(--cjy-texte-tenu);
}

.piece__nom {
  flex: 1;
  min-width: 0;
  font-size: var(--cjy-txt-sm);
  color: var(--cjy-texte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.piece__taille {
  flex: none;
  font-size: var(--cjy-txt-xs);
  font-variant-numeric: tabular-nums;
  color: var(--cjy-texte-tenu);
}

.piece--refusee {
  border-color: var(--cjy-erreur-bordure);
  background-color: var(--cjy-erreur-fond);
}

.piece--refusee .piece__nom,
.piece--refusee .piece__taille,
.piece--refusee .piece__icone {
  color: var(--cjy-erreur);
}

/* Champ leurre destiné aux robots : invisible et hors du flux, mais
   sans display:none, que certains robots savent détecter. */
.piege {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Compteur de caractères sous une zone de texte. */
.compteur {
  align-self: flex-end;
  font-size: var(--cjy-txt-xs);
  font-variant-numeric: tabular-nums;
  color: var(--cjy-texte-tenu);
}

.compteur--limite {
  color: var(--cjy-erreur);
  font-weight: var(--cjy-graisse-moyenne);
}


/* =====================================================================
   11. BANDEAU DE FERMETURE ESTIVALE
   ===================================================================== */

.bandeau-fermeture {
  position: relative;
  z-index: calc(var(--cjy-plan-entete) + 1);
  background-color: var(--cjy-fond-profond);
  color: var(--cjy-texte-inverse);
  font-size: var(--cjy-txt-sm);
  line-height: var(--cjy-interligne-serre);
}

.bandeau-fermeture__interieur {
  display: flex;
  align-items: center;
  gap: var(--cjy-esp-xs);
  padding-block: 0.7rem;
}

.bandeau-fermeture__icone {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--cjy-texte-inverse-doux);
}

.bandeau-fermeture__titre {
  font-weight: var(--cjy-graisse-demi);
  color: var(--cjy-texte-inverse);
}

.bandeau-fermeture__texte {
  color: var(--cjy-texte-inverse-doux);
}

.bandeau-fermeture__texte a {
  color: var(--cjy-texte-inverse);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}


/* =====================================================================
   12. EN-TÊTE ET NAVIGATION
   ===================================================================== */

.entete {
  position: sticky;
  top: 0;
  z-index: var(--cjy-plan-entete);
  background-color: color-mix(in srgb, var(--cjy-fond) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--cjy-transition),
              box-shadow var(--cjy-transition),
              background-color var(--cjy-transition);
}

/* Classe ajoutée par le script dès que la page est défilée. */
.entete.est-defilee {
  border-bottom-color: var(--cjy-bordure);
  box-shadow: var(--cjy-ombre-entete);
}

/* Barre indiquant la progression de la lecture, dessinée sous
   l'en-tête. Sa largeur est pilotée par site.js. */
.entete__progression {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--progression, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--cjy-accent), var(--cjy-bordure-accent));
  opacity: 0;
  transition: opacity var(--cjy-transition);
  pointer-events: none;
}

.entete.est-defilee .entete__progression {
  opacity: 1;
}

@supports not (backdrop-filter: blur(1px)) {
  .entete {
    background-color: var(--cjy-fond);
  }
}

.entete__interieur {
  display: flex;
  align-items: center;
  gap: var(--cjy-esp-md);
  height: var(--cjy-hauteur-entete);
  transition: height var(--cjy-duree-lente) var(--cjy-courbe-sortie);
}

/* L'en-tête se resserre légèrement une fois la page défilée : le
   contenu gagne de la place et le mouvement signale le défilement. */
.entete.est-defilee .entete__interieur {
  height: calc(var(--cjy-hauteur-entete) - 10px);
}

.entete.est-defilee .logo__marque {
  transform: scale(0.92);
}

/* --- Logo -------------------------------------------------------------- */

.logo {
  display: flex;
  align-items: center;
  gap: var(--cjy-esp-2xs);
  flex: none;
  color: var(--cjy-texte);
}

.logo:hover {
  color: var(--cjy-texte);
}

.logo__marque {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  background-color: var(--cjy-accent);
  color: var(--cjy-accent-contraste);
  border-radius: var(--cjy-arrondi-sm);
  font-family: var(--cjy-police-titre);
  font-variation-settings: var(--cjy-titre-variation);
  font-size: 15px;
  font-weight: var(--cjy-graisse-forte);
  letter-spacing: 0.01em;
  transition: background-color var(--cjy-transition),
              transform var(--cjy-duree-lente) var(--cjy-courbe-ressort);
}

.logo:hover .logo__marque {
  background-color: var(--cjy-accent-fonce);
}

.logo__texte {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
}

.logo__nom {
  font-family: var(--cjy-police-titre);
  font-variation-settings: var(--cjy-titre-variation);
  font-size: 15px;
  font-weight: var(--cjy-graisse-demi);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.logo__lieu {
  font-size: 10px;
  font-weight: var(--cjy-graisse-moyenne);
  letter-spacing: var(--cjy-lettrage-surtitre);
  text-transform: uppercase;
  color: var(--cjy-texte-tenu);
  white-space: nowrap;
}

/* --- Navigation principale ---------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  gap: var(--cjy-esp-2xs);
  margin-left: auto;
}

.nav__lien {
  position: relative;
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--cjy-arrondi-sm);
  color: var(--cjy-texte-doux);
  font-size: var(--cjy-txt-base);
  font-weight: var(--cjy-graisse-moyenne);
  white-space: nowrap;
  transition: color var(--cjy-transition-rapide),
              background-color var(--cjy-transition-rapide);
}

.nav__lien:hover {
  background-color: var(--cjy-fond-alt);
  color: var(--cjy-texte);
}

.nav__lien.est-actif {
  color: var(--cjy-texte);
}

/* Filet sous l'onglet : il se déploie depuis le centre au survol, et
   reste déployé sur l'onglet courant. */
.nav__lien::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.25rem;
  height: 1.5px;
  background-color: var(--cjy-accent);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--cjy-duree-lente) var(--cjy-courbe-sortie);
}

.nav__lien:hover::after,
.nav__lien:focus-visible::after {
  transform: scaleX(0.7);
}

.nav__lien.est-actif::after {
  transform: scaleX(1);
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: var(--cjy-esp-2xs);
  flex: none;
  padding-left: var(--cjy-esp-xs);
  margin-left: var(--cjy-esp-2xs);
  border-left: 1px solid var(--cjy-bordure);
}

/* Accès à l'espace membres : discret, il ne concurrence pas l'appel à
   l'action principal mais reste immédiatement repérable. */
.entete__acces {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-md);
  color: var(--cjy-texte-doux);
  transition: background-color var(--cjy-transition),
              border-color var(--cjy-transition),
              color var(--cjy-transition),
              transform var(--cjy-duree-lente) var(--cjy-courbe-ressort);
}

.entete__acces:hover,
.entete__acces:focus-visible {
  background-color: var(--cjy-fond-alt);
  border-color: var(--cjy-bordure-forte);
  color: var(--cjy-accent);
  transform: translateY(-2px);
}

/* --- Bouton d'ouverture du menu mobile ---------------------------------- */

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-md);
  background-color: transparent;
  color: var(--cjy-texte);
  transition: background-color var(--cjy-transition-rapide),
              border-color var(--cjy-transition-rapide);
}

.burger:hover {
  background-color: var(--cjy-fond-alt);
  border-color: var(--cjy-bordure-forte);
}

.burger__traits {
  position: relative;
  width: 18px;
  height: 12px;
}

.burger__trait {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform var(--cjy-transition),
              opacity var(--cjy-transition-rapide),
              top var(--cjy-transition);
}

.burger__trait:nth-child(1) { top: 0; }
.burger__trait:nth-child(2) { top: 5.25px; }
.burger__trait:nth-child(3) { top: 10.5px; }

.burger[aria-expanded='true'] .burger__trait:nth-child(1) {
  top: 5.25px;
  transform: rotate(45deg);
}

.burger[aria-expanded='true'] .burger__trait:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded='true'] .burger__trait:nth-child(3) {
  top: 5.25px;
  transform: rotate(-45deg);
}


/* =====================================================================
   13. MENU MOBILE
   ===================================================================== */

.voile {
  position: fixed;
  inset: 0;
  z-index: var(--cjy-plan-voile);
  background-color: rgba(28, 36, 48, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cjy-transition),
              visibility var(--cjy-transition);
}

.voile.est-ouvert {
  opacity: 1;
  visibility: visible;
}

.menu-mobile {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--cjy-plan-menu);
  display: flex;
  flex-direction: column;
  width: min(340px, 88vw);
  background-color: var(--cjy-fond);
  border-left: 1px solid var(--cjy-bordure);
  box-shadow: var(--cjy-ombre-xl);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--cjy-transition-souple),
              visibility var(--cjy-transition-souple);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-mobile.est-ouvert {
  transform: translateX(0);
  visibility: visible;
}

.menu-mobile__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cjy-esp-sm);
  padding: var(--cjy-esp-sm) var(--cjy-esp-md);
  border-bottom: 1px solid var(--cjy-bordure);
  min-height: var(--cjy-hauteur-entete-mobile);
}

.menu-mobile__fermer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-md);
  color: var(--cjy-texte-doux);
  transition: background-color var(--cjy-transition-rapide),
              color var(--cjy-transition-rapide);
}

.menu-mobile__fermer:hover {
  background-color: var(--cjy-fond-alt);
  color: var(--cjy-texte);
}

.menu-mobile__nav {
  display: flex;
  flex-direction: column;
  padding: var(--cjy-esp-2xs) var(--cjy-esp-sm);
}

.menu-mobile__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cjy-esp-xs) var(--cjy-esp-2xs);
  border-bottom: 1px solid var(--cjy-bordure-douce);
  color: var(--cjy-texte-doux);
  font-size: var(--cjy-txt-md);
  font-weight: var(--cjy-graisse-moyenne);
  transition: color var(--cjy-transition-rapide),
              padding-left var(--cjy-transition);
}

.menu-mobile__lien:hover {
  color: var(--cjy-texte);
  padding-left: var(--cjy-esp-xs);
}

.menu-mobile__lien.est-actif {
  color: var(--cjy-accent);
}

.menu-mobile__lien svg {
  opacity: 0.4;
  transition: transform var(--cjy-duree-lente) var(--cjy-courbe-ressort),
              opacity var(--cjy-transition);
}

.menu-mobile__lien:hover svg {
  opacity: 1;
  transform: translateX(4px);
}

/* --- Arrivée échelonnée des liens à l'ouverture ----------------------- */
/*  Chaque lien entre avec un léger retard sur le précédent : le menu
    se déroule au lieu d'apparaître d'un bloc.                           */

@media (prefers-reduced-motion: no-preference) {

  .menu-mobile__lien,
  .menu-mobile__pied > * {
    opacity: 0;
    transform: translateX(18px);
  }

  .menu-mobile.est-ouvert .menu-mobile__lien,
  .menu-mobile.est-ouvert .menu-mobile__pied > * {
    animation: entree-menu 460ms var(--cjy-courbe-sortie) forwards;
  }

  .menu-mobile.est-ouvert .menu-mobile__lien:nth-child(1)   { animation-delay:  70ms; }
  .menu-mobile.est-ouvert .menu-mobile__lien:nth-child(2)   { animation-delay: 115ms; }
  .menu-mobile.est-ouvert .menu-mobile__lien:nth-child(3)   { animation-delay: 160ms; }
  .menu-mobile.est-ouvert .menu-mobile__lien:nth-child(4)   { animation-delay: 205ms; }
  .menu-mobile.est-ouvert .menu-mobile__lien:nth-child(5)   { animation-delay: 250ms; }
  .menu-mobile.est-ouvert .menu-mobile__lien:nth-child(6)   { animation-delay: 295ms; }
  .menu-mobile.est-ouvert .menu-mobile__pied > *:nth-child(1) { animation-delay: 340ms; }
  .menu-mobile.est-ouvert .menu-mobile__pied > *:nth-child(2) { animation-delay: 385ms; }
}

@keyframes entree-menu {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

.menu-mobile__pied {
  margin-top: auto;
  padding: var(--cjy-esp-md);
  border-top: 1px solid var(--cjy-bordure);
  display: flex;
  flex-direction: column;
  gap: var(--cjy-esp-xs);
}

.menu-mobile__contact {
  font-size: var(--cjy-txt-sm);
  color: var(--cjy-texte-tenu);
  line-height: var(--cjy-interligne-serre);
}

/* Empêche la page de défiler derrière le menu ouvert. */
body.defilement-bloque {
  overflow: hidden;
}


/* =====================================================================
   14. PIED DE PAGE
   ===================================================================== */

.pied {
  margin-top: auto;
  background-color: var(--cjy-fond-profond);
  color: var(--cjy-texte-inverse-doux);
  font-size: var(--cjy-txt-base);
}

.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--cjy-esp-xl);
  padding-block: var(--cjy-esp-2xl);
}

.pied__marque .logo__nom,
.pied__marque .logo {
  color: var(--cjy-texte-inverse);
}

.pied__marque .logo__lieu {
  color: var(--cjy-texte-inverse-doux);
}

.pied__marque .logo__marque {
  background-color: var(--cjy-texte-inverse);
  color: var(--cjy-fond-profond);
}

.pied__description {
  margin-top: var(--cjy-esp-sm);
  max-width: 34ch;
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-texte);
  color: var(--cjy-texte-inverse-doux);
}

.pied__titre {
  margin-bottom: var(--cjy-esp-sm);
  font-family: var(--cjy-police-texte);
  font-size: var(--cjy-txt-xs);
  font-weight: var(--cjy-graisse-demi);
  letter-spacing: var(--cjy-lettrage-surtitre);
  text-transform: uppercase;
  color: var(--cjy-texte-inverse);
}

.pied__liste {
  display: flex;
  flex-direction: column;
  gap: var(--cjy-esp-2xs);
}

.pied__lien {
  color: var(--cjy-texte-inverse-doux);
  font-size: var(--cjy-txt-base);
  transition: color var(--cjy-transition-rapide);
}

.pied__lien:hover {
  color: var(--cjy-texte-inverse);
}

.pied__coordonnees {
  font-style: normal;
  line-height: var(--cjy-interligne-texte);
  color: var(--cjy-texte-inverse-doux);
}

.pied__coordonnees a {
  color: var(--cjy-texte-inverse-doux);
}

.pied__coordonnees a:hover {
  color: var(--cjy-texte-inverse);
}

.pied__reseaux {
  display: flex;
  gap: var(--cjy-esp-2xs);
  margin-top: var(--cjy-esp-sm);
}

.pied__reseau {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--cjy-bordure-sombre);
  border-radius: var(--cjy-arrondi-md);
  color: var(--cjy-texte-inverse-doux);
  transition: background-color var(--cjy-transition),
              border-color var(--cjy-transition),
              color var(--cjy-transition);
}

.pied__reseau:hover {
  background-color: var(--cjy-fond-profond-2);
  border-color: var(--cjy-texte-inverse-doux);
  color: var(--cjy-texte-inverse);
}

.pied__reseau svg {
  width: 17px;
  height: 17px;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cjy-esp-sm);
  padding-block: var(--cjy-esp-md);
  border-top: 1px solid var(--cjy-bordure-sombre);
  font-size: var(--cjy-txt-sm);
  color: var(--cjy-texte-tenu);
}

.pied__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cjy-esp-sm);
}

.pied__legal a {
  color: var(--cjy-texte-tenu);
}

.pied__legal a:hover {
  color: var(--cjy-texte-inverse);
}


/* =====================================================================
   15. PAGE D'ACCUEIL — BANDEAU D'OUVERTURE
   ===================================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--cjy-hauteur-entete) + var(--cjy-esp-2xl));
  padding-bottom: var(--cjy-section-y);
  overflow: hidden;
}

/* Trame de fond très discrète, dessinée en CSS : deux dégradés qui
   suggèrent la lumière sans image à charger. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 78% 8%,
                    var(--cjy-accent-clair) 0%, transparent 62%),
    linear-gradient(180deg, var(--cjy-fond-alt) 0%, var(--cjy-fond) 78%);
  opacity: 0.9;
  z-index: -1;
}

.hero__interieur {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--cjy-esp-2xl);
  align-items: center;
}

.hero__titre {
  font-size: var(--cjy-titre-1);
  max-width: 16ch;
}

.hero__texte {
  margin-top: var(--cjy-esp-md);
  max-width: 52ch;
  font-size: var(--cjy-txt-lg);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte-doux);
}

.hero__actions {
  margin-top: var(--cjy-esp-lg);
}

/* Mentions rassurantes sous les boutons. */
.hero__garanties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cjy-esp-sm);
  margin-top: var(--cjy-esp-lg);
  padding-top: var(--cjy-esp-md);
  border-top: 1px solid var(--cjy-bordure);
}

.hero__garantie {
  display: flex;
  align-items: center;
  gap: var(--cjy-esp-3xs);
  font-size: var(--cjy-txt-sm);
  color: var(--cjy-texte-doux);
}

.hero__garantie svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--cjy-accent);
}

/* Carte latérale du bandeau d'ouverture. */
.hero__panneau {
  padding: var(--cjy-esp-lg);
  background-color: var(--cjy-surface);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-xl);
  box-shadow: var(--cjy-ombre-md);
}

.hero__panneau-titre {
  font-size: var(--cjy-titre-5);
  margin-bottom: var(--cjy-esp-sm);
}

.hero__panneau-liste {
  display: flex;
  flex-direction: column;
}

.hero__panneau-element {
  display: flex;
  gap: var(--cjy-esp-xs);
  padding-block: var(--cjy-esp-xs);
}

.hero__panneau-element + .hero__panneau-element {
  border-top: 1px solid var(--cjy-bordure-douce);
}

.hero__panneau-numero {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--cjy-accent-clair);
  color: var(--cjy-accent);
  font-size: var(--cjy-txt-xs);
  font-weight: var(--cjy-graisse-demi);
  font-variant-numeric: tabular-nums;
}

.hero__panneau-texte {
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte-doux);
}

.hero__panneau-texte strong {
  display: block;
  margin-bottom: 0.1em;
  color: var(--cjy-texte);
  font-weight: var(--cjy-graisse-moyenne);
}


/* =====================================================================
   16. PAGE D'ACCUEIL — SECTIONS
   ===================================================================== */

/* --- Bande de chiffres clés -------------------------------------------- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cjy-esp-lg);
}

.chiffre {
  padding-left: var(--cjy-esp-sm);
  border-left: 2px solid var(--cjy-accent);
}

.chiffre__valeur {
  font-family: var(--cjy-police-titre);
  font-variation-settings: var(--cjy-titre-variation);
  font-size: var(--cjy-titre-2);
  font-weight: var(--cjy-graisse-demi);
  line-height: 1.05;
  letter-spacing: var(--cjy-lettrage-titre);
  color: var(--cjy-texte);
}

.chiffre__libelle {
  margin-top: var(--cjy-esp-3xs);
  font-size: var(--cjy-txt-base);
  color: var(--cjy-texte-doux);
}

/* --- Bloc d'appel à l'action ------------------------------------------- */

.appel {
  padding: var(--cjy-esp-xl);
  background-color: var(--cjy-fond-profond);
  color: var(--cjy-texte-inverse);
  border-radius: var(--cjy-arrondi-xl);
  text-align: center;
}

.appel__titre {
  color: var(--cjy-texte-inverse);
  font-size: var(--cjy-titre-3);
  max-width: 24ch;
  margin-inline: auto;
}

.appel__texte {
  margin-top: var(--cjy-esp-sm);
  margin-inline: auto;
  max-width: 56ch;
  color: var(--cjy-texte-inverse-doux);
  font-size: var(--cjy-txt-lg);
  line-height: var(--cjy-interligne-serre);
}

.appel__actions {
  margin-top: var(--cjy-esp-lg);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--cjy-esp-xs);
}

.appel .bouton {
  background-color: var(--cjy-texte-inverse);
  color: var(--cjy-fond-profond);
}

.appel .bouton:hover {
  background-color: #FFFFFF;
  color: var(--cjy-fond-profond);
}

.appel .bouton--secondaire {
  background-color: transparent;
  border-color: var(--cjy-bordure-sombre);
  color: var(--cjy-texte-inverse);
}

.appel .bouton--secondaire:hover {
  background-color: var(--cjy-fond-profond-2);
  border-color: var(--cjy-texte-inverse-doux);
  color: var(--cjy-texte-inverse);
}


/* =====================================================================
   17. GRILLE DES DOMAINES
   ===================================================================== */

.domaines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--cjy-esp-sm);
}

.domaine {
  --pointeur-x: 0.5;
  --pointeur-y: 0.5;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cjy-esp-2xs);
  padding: var(--cjy-esp-md);
  background-color: var(--cjy-surface);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-lg);
  transform: perspective(var(--cjy-perspective));
  transform-style: preserve-3d;
  transition: border-color var(--cjy-transition),
              box-shadow var(--cjy-duree-lente) var(--cjy-courbe-sortie),
              transform var(--cjy-duree-lente) var(--cjy-courbe-sortie);
}

/* Halo discret qui suit le curseur sur la carte. */
.domaine::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at calc(var(--pointeur-x) * 100%) calc(var(--pointeur-y) * 100%),
    var(--cjy-accent-tres-clair),
    transparent 68%
  );
  opacity: 0;
  transition: opacity var(--cjy-transition-lente);
  pointer-events: none;
}

.domaine:hover::before {
  opacity: 1;
}

.domaine:hover {
  border-color: var(--cjy-bordure-accent);
  box-shadow: var(--cjy-ombre-relief);
  transform:
    perspective(var(--cjy-perspective))
    translateY(-4px)
    rotateX(calc((var(--pointeur-y) - 0.5) * var(--cjy-relief-angle-carte) * -2))
    rotateY(calc((var(--pointeur-x) - 0.5) * var(--cjy-relief-angle-carte) * 2));
}

/* Le contenu se détache légèrement du fond de la carte : c'est ce
   décalage en profondeur qui rend l'inclinaison lisible. */
.domaine > * {
  transform: translateZ(0);
  transition: transform var(--cjy-duree-lente) var(--cjy-courbe-sortie);
}

.domaine:hover > * {
  transform: translateZ(22px);
}

.domaine__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--cjy-esp-2xs);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-md);
  background-color: var(--cjy-fond-alt);
  color: var(--cjy-accent);
  transition: background-color var(--cjy-transition),
              border-color var(--cjy-transition),
              color var(--cjy-transition),
              transform var(--cjy-duree-lente) var(--cjy-courbe-ressort),
              box-shadow var(--cjy-duree-lente) var(--cjy-courbe-sortie);
}

/* Le pictogramme se soulève davantage que le reste du contenu et
   pivote légèrement : c'est lui qui porte l'effet de profondeur. */
.domaine:hover .domaine__icone {
  background-color: var(--cjy-accent);
  border-color: var(--cjy-accent);
  color: var(--cjy-accent-contraste);
  box-shadow: var(--cjy-ombre-md);
  transform: translateZ(20px) rotate(-4deg) scale(1.06);
}

.domaine__icone svg {
  width: 20px;
  height: 20px;
}

/* ---------------------------------------------------------------------
   Équivalent clavier du survol
   ---------------------------------------------------------------------
   « :focus-visible » ne se déclenche qu'à la navigation au clavier, pas
   après un clic souris : une carte cliquée puis quittée ne reste donc
   plus figée en position haute au retour sur la page.

   Ces règles sont volontairement isolées : un navigateur qui ne
   connaîtrait pas « :has() » les ignore sans perdre les effets de
   survol, définis plus haut dans leurs propres blocs.
   --------------------------------------------------------------------- */

.domaine:has(:focus-visible)::before {
  opacity: 1;
}

.domaine:has(:focus-visible) {
  border-color: var(--cjy-bordure-accent);
  box-shadow: var(--cjy-ombre-relief);
  transform: perspective(var(--cjy-perspective)) translateY(-4px);
}

.domaine:has(:focus-visible) > * {
  transform: translateZ(22px);
}

.domaine:has(:focus-visible) .domaine__icone {
  background-color: var(--cjy-accent);
  border-color: var(--cjy-accent);
  color: var(--cjy-accent-contraste);
  box-shadow: var(--cjy-ombre-md);
  transform: translateZ(20px) rotate(-4deg) scale(1.06);
}

.carte--cliquable:has(:focus-visible) {
  border-color: var(--cjy-bordure-accent);
  box-shadow: var(--cjy-ombre-relief);
  transform: translateY(-4px);
}

.domaine__titre {
  font-size: var(--cjy-titre-5);
  line-height: var(--cjy-interligne-sous);
}

.domaine__titre a {
  color: inherit;
}

/* Le lien couvre toute la carte. */
.domaine__titre a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.domaine__accroche {
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte-doux);
}

.domaine__lien {
  margin-top: auto;
  padding-top: var(--cjy-esp-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--cjy-esp-3xs);
  font-size: var(--cjy-txt-sm);
  font-weight: var(--cjy-graisse-moyenne);
  color: var(--cjy-accent);
}

.domaine__lien svg {
  width: 13px;
  height: 13px;
  transition: transform var(--cjy-transition);
}

.domaine:hover .domaine__lien svg {
  transform: translateX(3px);
}


/* =====================================================================
   18. ÉTAPES DE LA DÉMARCHE
   ===================================================================== */

.etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cjy-esp-lg);
  counter-reset: etape;
}

.etape {
  position: relative;
  counter-increment: etape;
  padding-top: var(--cjy-esp-lg);
  border-top: 1px solid var(--cjy-bordure);
}

.etape::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  top: var(--cjy-esp-sm);
  left: 0;
  font-family: var(--cjy-police-titre);
  font-variation-settings: var(--cjy-titre-variation);
  font-size: var(--cjy-txt-sm);
  font-weight: var(--cjy-graisse-demi);
  letter-spacing: 0.04em;
  color: var(--cjy-texte-tenu);
  font-variant-numeric: tabular-nums;
}

.etape__titre {
  margin-top: var(--cjy-esp-md);
  font-size: var(--cjy-titre-5);
}

.etape__texte {
  margin-top: var(--cjy-esp-2xs);
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-texte);
  color: var(--cjy-texte-doux);
}


/* =====================================================================
   19. PAGE NOS COMPÉTENCES
   ===================================================================== */

/* Sommaire des pôles, affiché en haut de page puis collé au défilement. */
.sommaire {
  position: sticky;
  top: calc(var(--cjy-hauteur-entete) + var(--cjy-esp-sm));
}

.sommaire__titre {
  margin-bottom: var(--cjy-esp-xs);
  font-family: var(--cjy-police-texte);
  font-size: var(--cjy-txt-xs);
  font-weight: var(--cjy-graisse-demi);
  letter-spacing: var(--cjy-lettrage-surtitre);
  text-transform: uppercase;
  color: var(--cjy-texte-tenu);
}

.sommaire__liste {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--cjy-bordure);
}

.sommaire__lien {
  position: relative;
  display: block;
  padding: 0.5rem var(--cjy-esp-sm);
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--cjy-texte-doux);
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-serre);
  transition: color var(--cjy-transition-rapide),
              border-color var(--cjy-transition-rapide),
              padding-left var(--cjy-transition);
}

.sommaire__lien:hover {
  color: var(--cjy-texte);
  border-left-color: var(--cjy-bordure-forte);
}

/* Marqueur posé par le script quand la section correspondante est à l'écran. */
.sommaire__lien.est-actif {
  color: var(--cjy-accent);
  font-weight: var(--cjy-graisse-moyenne);
  border-left-color: var(--cjy-accent);
}

/* --- Bloc d'un pôle ----------------------------------------------------- */

.pole {
  scroll-margin-top: calc(var(--cjy-hauteur-entete) + var(--cjy-esp-lg));
  padding-block: var(--cjy-esp-xl);
}

/* Le premier pôle n'a pas de séparateur au-dessus : inutile de réserver
   l'espace correspondant, surtout sur mobile où le sommaire le précède
   déjà d'une marge. */
.pole:first-child {
  padding-top: 0;
}

.pole + .pole {
  border-top: 1px solid var(--cjy-bordure);
}

/* Surlignage temporaire du pôle atteint depuis un lien de la page
   d'accueil : le fond s'éclaire brièvement pour signaler l'arrivée. */
.pole.est-cible {
  animation: surligner 2.4s ease-out;
}

@keyframes surligner {
  0%   { background-color: var(--cjy-accent-clair); }
  100% { background-color: transparent; }
}

.pole__entete {
  display: flex;
  align-items: flex-start;
  gap: var(--cjy-esp-sm);
  margin-bottom: var(--cjy-esp-md);
}

.pole__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-md);
  background-color: var(--cjy-fond-alt);
  color: var(--cjy-accent);
}

.pole__icone svg {
  width: 24px;
  height: 24px;
}

.pole__titre {
  font-size: var(--cjy-titre-3);
}

.pole__accroche {
  margin-top: var(--cjy-esp-3xs);
  font-size: var(--cjy-txt-lg);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte-doux);
}

.pole__corps {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: var(--cjy-esp-xl);
  align-items: start;
}

.pole__description {
  max-width: var(--cjy-mesure);
  font-size: var(--cjy-txt-md);
  line-height: var(--cjy-interligne-texte);
  color: var(--cjy-texte-doux);
}

.pole__description p + p {
  margin-top: var(--cjy-esp-sm);
}

.pole__exemples {
  padding: var(--cjy-esp-md);
  background-color: var(--cjy-fond-alt);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-lg);
}

.pole__exemples-titre {
  margin-bottom: var(--cjy-esp-2xs);
  font-family: var(--cjy-police-texte);
  font-size: var(--cjy-txt-xs);
  font-weight: var(--cjy-graisse-demi);
  letter-spacing: var(--cjy-lettrage-surtitre);
  text-transform: uppercase;
  color: var(--cjy-texte-tenu);
}

.pole__exemples-liste {
  display: flex;
  flex-direction: column;
  gap: var(--cjy-esp-2xs);
}

.pole__exemple {
  position: relative;
  padding-left: var(--cjy-esp-sm);
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte-doux);
}

.pole__exemple::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 1px;
  background-color: var(--cjy-bordure-forte);
}

.pole__image {
  margin-top: var(--cjy-esp-md);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-lg);
  overflow: hidden;
}

.pole__image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.pole__actions {
  margin-top: var(--cjy-esp-md);
}


/* =====================================================================
   20. PAGE NOS PARTENAIRES
   ===================================================================== */

.partenaires {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--cjy-esp-sm);
}

.partenaire {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cjy-esp-xs);
  padding: var(--cjy-esp-md);
  background-color: var(--cjy-surface);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-lg);
  text-align: center;
  transition: border-color var(--cjy-transition),
              box-shadow var(--cjy-duree-lente) var(--cjy-courbe-sortie),
              transform var(--cjy-duree-lente) var(--cjy-courbe-sortie);
}

.partenaire:hover {
  border-color: var(--cjy-bordure-accent);
  box-shadow: var(--cjy-ombre-relief);
  transform: translateY(-4px) scale(1.015);
}

.partenaire__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 88px;
}

.partenaire__logo img {
  max-height: 100%;
  max-width: 80%;
  object-fit: contain;
  /* Les logos sont désaturés au repos pour uniformiser la grille,
     et retrouvent leurs couleurs au survol. */
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--cjy-transition),
              opacity var(--cjy-transition);
}

.partenaire:hover .partenaire__logo img {
  filter: grayscale(0);
  opacity: 1;
}

/* Repli quand aucun logo n'a été fourni : les initiales du partenaire. */
.partenaire__initiales {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-md);
  background-color: var(--cjy-fond-alt);
  color: var(--cjy-texte-tenu);
  font-family: var(--cjy-police-titre);
  font-variation-settings: var(--cjy-titre-variation);
  font-size: var(--cjy-txt-lg);
  font-weight: var(--cjy-graisse-demi);
  letter-spacing: 0.02em;
}

.partenaire__nom {
  font-size: var(--cjy-txt-base);
  font-weight: var(--cjy-graisse-moyenne);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte);
}

.partenaire__categorie {
  font-size: var(--cjy-txt-xs);
  letter-spacing: 0.02em;
  color: var(--cjy-texte-tenu);
}

.partenaire__description {
  font-size: var(--cjy-txt-sm);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte-doux);
}

.partenaire__lien::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Regroupement par catégorie. */
.partenaires-groupe + .partenaires-groupe {
  margin-top: var(--cjy-esp-xl);
}

.partenaires-groupe__titre {
  display: flex;
  align-items: center;
  gap: var(--cjy-esp-sm);
  margin-bottom: var(--cjy-esp-md);
  font-family: var(--cjy-police-texte);
  font-size: var(--cjy-txt-xs);
  font-weight: var(--cjy-graisse-demi);
  letter-spacing: var(--cjy-lettrage-surtitre);
  text-transform: uppercase;
  color: var(--cjy-texte-tenu);
}

.partenaires-groupe__titre::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--cjy-bordure);
}


/* =====================================================================
   21. PAGE ACTUALITÉS
   ===================================================================== */

.instagram {
  padding: var(--cjy-esp-md);
  background-color: var(--cjy-surface);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-xl);
}

.instagram__entete {
  display: flex;
  align-items: center;
  gap: var(--cjy-esp-xs);
  padding-bottom: var(--cjy-esp-sm);
  margin-bottom: var(--cjy-esp-md);
  border-bottom: 1px solid var(--cjy-bordure);
}

.instagram__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background-color: var(--cjy-accent);
  color: var(--cjy-accent-contraste);
}

.instagram__avatar svg {
  width: 22px;
  height: 22px;
}

.instagram__identite {
  min-width: 0;
}

.instagram__nom {
  font-size: var(--cjy-txt-md);
  font-weight: var(--cjy-graisse-demi);
  color: var(--cjy-texte);
}

.instagram__pseudo {
  font-size: var(--cjy-txt-sm);
  color: var(--cjy-texte-tenu);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instagram__action {
  margin-left: auto;
  flex: none;
}

/* Conteneur du widget tiers ; il s'adapte à la largeur disponible. */
.instagram__flux {
  min-height: 200px;
}

.instagram__flux > * {
  max-width: 100%;
}

/* Grille de secours, alimentée depuis l'espace d'administration. */
.publications {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--cjy-esp-sm);
}

.publication {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--cjy-surface);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-lg);
  overflow: hidden;
  transition: border-color var(--cjy-transition),
              box-shadow var(--cjy-duree-lente) var(--cjy-courbe-sortie),
              transform var(--cjy-duree-lente) var(--cjy-courbe-sortie);
}

.publication:hover {
  border-color: var(--cjy-bordure-accent);
  box-shadow: var(--cjy-ombre-relief);
  transform: translateY(-4px);
}

.publication__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: var(--cjy-fond-creux);
}

.publication__corps {
  display: flex;
  flex-direction: column;
  gap: var(--cjy-esp-3xs);
  padding: var(--cjy-esp-sm);
}

.publication__date {
  font-size: var(--cjy-txt-xs);
  letter-spacing: 0.02em;
  color: var(--cjy-texte-tenu);
}

.publication__titre {
  font-size: var(--cjy-titre-6);
  font-family: var(--cjy-police-texte);
  font-weight: var(--cjy-graisse-demi);
  letter-spacing: 0;
  line-height: var(--cjy-interligne-sous);
}

.publication__texte {
  font-size: var(--cjy-txt-sm);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte-doux);
}

.publication__lien::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* État vide générique, réutilisé sur plusieurs pages. */
.vide {
  padding: var(--cjy-esp-xl) var(--cjy-esp-md);
  border: 1px dashed var(--cjy-bordure-forte);
  border-radius: var(--cjy-arrondi-lg);
  text-align: center;
  color: var(--cjy-texte-tenu);
}

.vide__titre {
  margin-bottom: var(--cjy-esp-3xs);
  font-size: var(--cjy-titre-5);
  color: var(--cjy-texte-doux);
}

.vide__texte {
  max-width: 46ch;
  margin-inline: auto;
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-serre);
}


/* =====================================================================
   22. PAGE LA CLINIQUE
   ===================================================================== */

.objectifs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--cjy-esp-md);
}

.objectif {
  padding-top: var(--cjy-esp-sm);
  border-top: 2px solid var(--cjy-accent);
}

.objectif__titre {
  font-size: var(--cjy-titre-5);
}

.objectif__texte {
  margin-top: var(--cjy-esp-2xs);
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-texte);
  color: var(--cjy-texte-doux);
}

/* --- Engagements et limites, côte à côte --------------------------------- */

.engagements {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--cjy-esp-xl);
  align-items: start;
}

.engagements__liste {
  display: flex;
  flex-direction: column;
  margin-top: var(--cjy-esp-md);
}

/* Chaque engagement est porté par un filet vertical qui s'épaissit et
   prend la couleur d'accent au survol. */
.engagement {
  position: relative;
  padding: var(--cjy-esp-sm) 0 var(--cjy-esp-sm) var(--cjy-esp-md);
  border-left: 2px solid var(--cjy-bordure);
  transition: border-color var(--cjy-duree-lente) var(--cjy-courbe-sortie),
              padding-left var(--cjy-duree-lente) var(--cjy-courbe-sortie);
}

.engagement:hover {
  border-left-color: var(--cjy-accent);
  padding-left: calc(var(--cjy-esp-md) + 6px);
}

.engagement__terme {
  font-family: var(--cjy-police-titre);
  font-variation-settings: var(--cjy-titre-variation);
  font-size: var(--cjy-titre-5);
  font-weight: var(--cjy-graisse-demi);
  letter-spacing: var(--cjy-lettrage-titre);
  color: var(--cjy-texte);
  margin-bottom: 0.15em;
}

.engagement__texte {
  margin: 0;
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-texte);
  color: var(--cjy-texte-doux);
}

/* --- Ce que la Clinique ne fait pas --------------------------------------- */

.limites {
  position: sticky;
  top: calc(var(--cjy-hauteur-entete) + var(--cjy-esp-md));
  padding: var(--cjy-esp-lg);
  background-color: var(--cjy-alerte-fond);
  border: 1px solid var(--cjy-alerte-bordure);
  border-radius: var(--cjy-arrondi-xl);
  scroll-margin-top: calc(var(--cjy-hauteur-entete) + var(--cjy-esp-lg));
}

.limites__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--cjy-esp-sm);
  border: 1px solid var(--cjy-alerte-bordure);
  border-radius: var(--cjy-arrondi-md);
  background-color: var(--cjy-surface);
  color: var(--cjy-alerte);
}

.limites__titre {
  font-size: var(--cjy-titre-4);
  color: var(--cjy-alerte);
}

.limites__texte {
  margin-top: var(--cjy-esp-sm);
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-texte);
  color: var(--cjy-texte-doux);
}

.limites__texte p + p {
  margin-top: var(--cjy-esp-sm);
}

.limites__pied {
  margin-top: var(--cjy-esp-md);
  padding-top: var(--cjy-esp-sm);
  border-top: 1px solid var(--cjy-alerte-bordure);
  font-size: var(--cjy-txt-sm);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-alerte);
}


/* --- Équipe -------------------------------------------------------------- */

.equipe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--cjy-esp-md);
}

.membre {
  display: flex;
  flex-direction: column;
  gap: var(--cjy-esp-2xs);
}

.membre__portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-lg);
  background-color: var(--cjy-fond-creux);
  filter: grayscale(1) contrast(1.02);
  transition: filter var(--cjy-transition-lente);
}

.membre:hover .membre__portrait {
  filter: grayscale(0);
}

.membre__initiales {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-lg);
  background-color: var(--cjy-fond-alt);
  color: var(--cjy-texte-tenu);
  font-family: var(--cjy-police-titre);
  font-variation-settings: var(--cjy-titre-variation);
  font-size: var(--cjy-titre-3);
  font-weight: var(--cjy-graisse-demi);
}

.membre__nom {
  font-size: var(--cjy-txt-md);
  font-weight: var(--cjy-graisse-demi);
  color: var(--cjy-texte);
  line-height: var(--cjy-interligne-sous);
}

.membre__fonction {
  font-size: var(--cjy-txt-sm);
  color: var(--cjy-texte-doux);
  line-height: var(--cjy-interligne-serre);
}

.membre__description {
  font-size: var(--cjy-txt-sm);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte-tenu);
}


/* =====================================================================
   23. PAGE NOUS REJOINDRE
   ===================================================================== */

.profils {
  display: flex;
  flex-direction: column;
  gap: var(--cjy-esp-xl);
}

.profil {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--cjy-esp-lg);
  padding-top: var(--cjy-esp-lg);
  border-top: 1px solid var(--cjy-bordure);
  align-items: start;
}

.profil__titre {
  font-size: var(--cjy-titre-4);
  position: sticky;
  top: calc(var(--cjy-hauteur-entete) + var(--cjy-esp-md));
}

.profil__texte {
  max-width: var(--cjy-mesure);
  font-size: var(--cjy-txt-md);
  line-height: var(--cjy-interligne-texte);
  color: var(--cjy-texte-doux);
}

.profil__texte p + p {
  margin-top: var(--cjy-esp-sm);
}

.profil__actions {
  margin-top: var(--cjy-esp-md);
}


/* =====================================================================
   24. PAGE CONTACT
   ===================================================================== */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: var(--cjy-esp-xl);
  align-items: start;
}

.contact__formulaire {
  padding: var(--cjy-esp-lg);
  background-color: var(--cjy-surface);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-xl);
}

.contact__aside {
  position: sticky;
  top: calc(var(--cjy-hauteur-entete) + var(--cjy-esp-md));
  display: flex;
  flex-direction: column;
  gap: var(--cjy-esp-sm);
}

.contact__bloc {
  padding: var(--cjy-esp-md);
  background-color: var(--cjy-fond-alt);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-lg);
}

.contact__bloc-titre {
  margin-bottom: var(--cjy-esp-2xs);
  font-family: var(--cjy-police-texte);
  font-size: var(--cjy-txt-xs);
  font-weight: var(--cjy-graisse-demi);
  letter-spacing: var(--cjy-lettrage-surtitre);
  text-transform: uppercase;
  color: var(--cjy-texte-tenu);
}

.contact__bloc-texte {
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-texte);
  color: var(--cjy-texte-doux);
}

.contact__coordonnees {
  display: flex;
  flex-direction: column;
  gap: var(--cjy-esp-xs);
  font-style: normal;
}

.contact__ligne {
  display: flex;
  gap: var(--cjy-esp-2xs);
  font-size: var(--cjy-txt-base);
  line-height: var(--cjy-interligne-serre);
  color: var(--cjy-texte-doux);
}

.contact__ligne svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.18em;
  color: var(--cjy-accent);
}

/* --- Message de confirmation après envoi -------------------------------- */

.confirmation {
  max-width: var(--cjy-largeur-formulaire);
  margin-inline: auto;
  padding: var(--cjy-esp-xl);
  background-color: var(--cjy-surface);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-xl);
  text-align: center;
}

.confirmation__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--cjy-esp-md);
  border-radius: 50%;
  background-color: var(--cjy-succes-fond);
  color: var(--cjy-succes);
}

.confirmation__icone svg {
  width: 26px;
  height: 26px;
}

.confirmation__titre {
  font-size: var(--cjy-titre-3);
}

.confirmation__texte {
  margin-top: var(--cjy-esp-sm);
  font-size: var(--cjy-txt-md);
  line-height: var(--cjy-interligne-texte);
  color: var(--cjy-texte-doux);
}

.confirmation__reference {
  display: inline-flex;
  align-items: center;
  gap: var(--cjy-esp-2xs);
  margin-top: var(--cjy-esp-md);
  padding: var(--cjy-esp-2xs) var(--cjy-esp-sm);
  background-color: var(--cjy-fond-alt);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-md);
  font-family: var(--cjy-police-mono);
  font-size: var(--cjy-txt-base);
  letter-spacing: 0.04em;
  color: var(--cjy-texte);
}

.confirmation__actions {
  margin-top: var(--cjy-esp-lg);
}

/* --- Formulaire indisponible pendant la fermeture ------------------------ */

.formulaire-ferme {
  padding: var(--cjy-esp-xl);
  background-color: var(--cjy-alerte-fond);
  border: 1px solid var(--cjy-alerte-bordure);
  border-radius: var(--cjy-arrondi-xl);
  text-align: center;
}

.formulaire-ferme__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--cjy-esp-md);
  border-radius: 50%;
  background-color: #FFFFFF;
  color: var(--cjy-alerte);
  border: 1px solid var(--cjy-alerte-bordure);
}

.formulaire-ferme__icone svg {
  width: 24px;
  height: 24px;
}

.formulaire-ferme__titre {
  font-size: var(--cjy-titre-4);
  color: var(--cjy-alerte);
}

.formulaire-ferme__texte {
  margin-top: var(--cjy-esp-sm);
  margin-inline: auto;
  max-width: 56ch;
  font-size: var(--cjy-txt-md);
  line-height: var(--cjy-interligne-texte);
  color: var(--cjy-texte-doux);
}


/* =====================================================================
   25. PAGES LÉGALES ET CONTENU LONG
   ===================================================================== */

.contenu-texte {
  max-width: var(--cjy-mesure);
  font-size: var(--cjy-txt-md);
  line-height: var(--cjy-interligne-texte);
  color: var(--cjy-texte-doux);
}

.contenu-texte > * + * {
  margin-top: var(--cjy-esp-sm);
}

.contenu-texte h2 {
  margin-top: var(--cjy-esp-xl);
  font-size: var(--cjy-titre-4);
  color: var(--cjy-texte);
}

.contenu-texte h3 {
  margin-top: var(--cjy-esp-lg);
  font-size: var(--cjy-titre-5);
  color: var(--cjy-texte);
}

.contenu-texte h2 + *,
.contenu-texte h3 + * {
  margin-top: var(--cjy-esp-2xs);
}

.contenu-texte ul,
.contenu-texte ol {
  padding-left: var(--cjy-esp-md);
  display: flex;
  flex-direction: column;
  gap: var(--cjy-esp-3xs);
}

.contenu-texte ul li {
  position: relative;
  padding-left: var(--cjy-esp-2xs);
}

.contenu-texte ul li::before {
  content: '';
  position: absolute;
  left: calc(var(--cjy-esp-md) * -1 + 0.2rem);
  top: 0.68em;
  width: 5px;
  height: 1px;
  background-color: var(--cjy-bordure-forte);
}

.contenu-texte ol {
  list-style: decimal;
}

.contenu-texte dl {
  display: grid;
  gap: var(--cjy-esp-xs);
}

.contenu-texte dt {
  font-weight: var(--cjy-graisse-demi);
  color: var(--cjy-texte);
}

/* Sommaire d'une page légale. */
.sommaire-legal {
  padding: var(--cjy-esp-md);
  background-color: var(--cjy-fond-alt);
  border: 1px solid var(--cjy-bordure);
  border-radius: var(--cjy-arrondi-lg);
}

.sommaire-legal__liste {
  display: flex;
  flex-direction: column;
  gap: var(--cjy-esp-3xs);
  counter-reset: legal;
}

.sommaire-legal__lien {
  counter-increment: legal;
  font-size: var(--cjy-txt-base);
  color: var(--cjy-texte-doux);
}

.sommaire-legal__lien::before {
  content: counter(legal) '. ';
  color: var(--cjy-texte-tenu);
  font-variant-numeric: tabular-nums;
}

.sommaire-legal__lien:hover {
  color: var(--cjy-accent);
}

/* Date de mise à jour d'un document légal. */
.maj {
  font-size: var(--cjy-txt-sm);
  color: var(--cjy-texte-tenu);
  font-style: italic;
}


/* =====================================================================
   26. PAGES D'ERREUR
   ===================================================================== */

.erreur-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 62vh;
  padding-block: var(--cjy-section-y);
  text-align: center;
}

.erreur-page__code {
  font-family: var(--cjy-police-titre);
  font-variation-settings: var(--cjy-titre-variation);
  font-size: clamp(4rem, 3rem + 5vw, 7rem);
  font-weight: var(--cjy-graisse-demi);
  line-height: 1;
  letter-spacing: var(--cjy-lettrage-titre);
  color: var(--cjy-bordure-forte);
}

.erreur-page__titre {
  margin-top: var(--cjy-esp-sm);
  font-size: var(--cjy-titre-3);
}

.erreur-page__texte {
  margin-top: var(--cjy-esp-sm);
  max-width: 48ch;
  font-size: var(--cjy-txt-md);
  line-height: var(--cjy-interligne-texte);
  color: var(--cjy-texte-doux);
}

.erreur-page__actions {
  margin-top: var(--cjy-esp-lg);
}


/* =====================================================================
   27. UTILITAIRES
   ===================================================================== */

.flex          { display: flex; }
.flex-colonne  { display: flex; flex-direction: column; }
.flex-centre   { display: flex; align-items: center; }
.flex-entre    { display: flex; align-items: center; justify-content: space-between; }
.flex-1        { flex: 1; min-width: 0; }
.enroule       { flex-wrap: wrap; }

.gap-2xs { gap: var(--cjy-esp-2xs); }
.gap-xs  { gap: var(--cjy-esp-xs); }
.gap-sm  { gap: var(--cjy-esp-sm); }
.gap-md  { gap: var(--cjy-esp-md); }
.gap-lg  { gap: var(--cjy-esp-lg); }

.mt-2xs { margin-top: var(--cjy-esp-2xs); }
.mt-xs  { margin-top: var(--cjy-esp-xs); }
.mt-sm  { margin-top: var(--cjy-esp-sm); }
.mt-md  { margin-top: var(--cjy-esp-md); }
.mt-lg  { margin-top: var(--cjy-esp-lg); }
.mt-xl  { margin-top: var(--cjy-esp-xl); }

.mb-2xs { margin-bottom: var(--cjy-esp-2xs); }
.mb-xs  { margin-bottom: var(--cjy-esp-xs); }
.mb-sm  { margin-bottom: var(--cjy-esp-sm); }
.mb-md  { margin-bottom: var(--cjy-esp-md); }
.mb-lg  { margin-bottom: var(--cjy-esp-lg); }

.centre       { text-align: center; }
.centre-bloc  { margin-inline: auto; }
.droite       { text-align: right; }

.txt-sm { font-size: var(--cjy-txt-sm); }
.txt-xs { font-size: var(--cjy-txt-xs); }
.txt-lg { font-size: var(--cjy-txt-lg); }

.gras       { font-weight: var(--cjy-graisse-demi); }
.chiffres-tabulaires { font-variant-numeric: tabular-nums; }

.pleine-largeur { width: 100%; }

/* Conteneur défilant horizontalement — pour les tableaux sur mobile. */
.defilement-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* =====================================================================
   28. ANIMATIONS À L'APPARITION
   ---------------------------------------------------------------------
   Les éléments portant l'attribut data-apparition sont révélés par le
   script au moment où ils entrent dans la fenêtre. Sans JavaScript, ils
   restent simplement visibles.
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* La classe « js » est posée sur <html> par site.js dès son exécution.
     Sans elle (script bloqué, erreur de chargement) les blocs restent
     simplement visibles : la page ne peut jamais rester vide.

     L'apparition passe par une ANIMATION et non par une transition.
     Une transition posée ici occuperait la propriété « transition » de
     l'élément et écraserait celle de son état de survol : les cartes
     changeaient alors d'ombre et de contour d'un coup, sans fondu.
     Une animation, elle, laisse « transition » entièrement libre. */
  .js [data-apparition] {
    opacity: 0;
  }

  .js [data-apparition].est-visible {
    animation: apparition 620ms var(--cjy-courbe-sortie) both;
  }

  /* Décalage progressif entre les éléments d'une même grille. */
  .js [data-apparition-delai='1'].est-visible { animation-delay:  70ms; }
  .js [data-apparition-delai='2'].est-visible { animation-delay: 140ms; }
  .js [data-apparition-delai='3'].est-visible { animation-delay: 210ms; }
  .js [data-apparition-delai='4'].est-visible { animation-delay: 280ms; }
  .js [data-apparition-delai='5'].est-visible { animation-delay: 350ms; }
  .js [data-apparition-delai='6'].est-visible { animation-delay: 420ms; }


  /* -------------------------------------------------------------------
     Arrivée sur la page
     -------------------------------------------------------------------
     Le bandeau d'ouverture se met en place dès le chargement, sans
     attendre le défilement : c'est la première impression du visiteur.
     ------------------------------------------------------------------- */

  .js .hero .surtitre,
  .js .hero__titre,
  .js .hero__texte,
  .js .hero__actions,
  .js .hero__garanties,
  .js .hero__panneau {
    animation: entree-haut 780ms var(--cjy-courbe-sortie) both;
  }

  .js .hero .surtitre   { animation-delay:  60ms; }
  .js .hero__titre      { animation-delay: 130ms; }
  .js .hero__texte      { animation-delay: 220ms; }
  .js .hero__actions    { animation-delay: 300ms; }
  .js .hero__garanties  { animation-delay: 370ms; }
  .js .hero__panneau    { animation-delay: 260ms; animation-name: entree-panneau; }

  /* L'en-tête de page des rubriques intérieures suit le même principe. */
  .js .page-entete__contenu > * {
    animation: entree-haut 700ms var(--cjy-courbe-sortie) both;
  }

  .js .page-entete__contenu > *:nth-child(1) { animation-delay:  60ms; }
  .js .page-entete__contenu > *:nth-child(2) { animation-delay: 130ms; }
  .js .page-entete__contenu > *:nth-child(3) { animation-delay: 200ms; }
}

@keyframes apparition {
  from { opacity: 0; transform: translateY(18px) scale(0.995); }
  to   { opacity: 1; transform: none; }
}

@keyframes entree-haut {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes entree-panneau {
  from {
    opacity: 0;
    transform: perspective(1100px) translateY(26px) rotateX(6deg);
  }
  to {
    opacity: 1;
    transform: perspective(1100px) translateY(0) rotateX(0);
  }
}

/* ---------------------------------------------------------------------
   Réglage système « réduire les animations »
   ---------------------------------------------------------------------
   Sous Windows, ce réglage se trouve dans Paramètres > Accessibilité >
   Effets visuels > « Effets d'animation ». Lorsqu'il est désactivé, le
   navigateur demande la suppression des animations.

   On supprime alors tout DÉPLACEMENT — apparitions, inclinaisons,
   soulèvements, reflets — mais on conserve le retour visuel : couleurs,
   ombres et contours continuent de réagir. Une interface totalement
   figée donne l'impression d'être cassée, ce que la recommandation
   d'accessibilité ne demande pas.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto !important;
  }

  /* Plus aucune animation d'entrée. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  /* Relief neutralisé : les formules de transformation restent en place
     mais leur amplitude tombe à zéro. Les ombres, elles, subsistent. */
  :root {
    --cjy-relief-angle:       0deg;
    --cjy-relief-angle-carte: 0deg;
    --cjy-relief-elevation:   0px;
    --cjy-relief-enfoncement: 0px;
  }

  /* Le contenu est visible d'emblée, sans attendre le défilement. */
  .js [data-apparition] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Pas de reflet balayant, pas de décalage en profondeur. */
  .bouton::before,
  .domaine::before {
    display: none;
  }

  .domaine:hover > *,
  .domaine:has(:focus-visible) > *,
  .domaine:hover .domaine__icone,
  .domaine:has(:focus-visible) .domaine__icone,
  .carte--cliquable:hover,
  .carte--cliquable:has(:focus-visible),
  .partenaire:hover,
  .publication:hover,
  .bouton:hover svg,
  .menu-mobile__lien:hover svg {
    transform: none;
  }

  .bouton:active {
    transform: perspective(var(--cjy-perspective));
  }

  /* Les panneaux coulissants s'affichent instantanément. */
  .menu-mobile,
  .voile {
    transition-duration: 0.01ms !important;
  }
}


/* =====================================================================
   29. ADAPTATIONS RESPONSIVES
   ---------------------------------------------------------------------
   Conception pensée pour le mobile d'abord ; ces règles ajustent les
   mises en page complexes sur les écrans plus étroits.
   ===================================================================== */

/* ---------------------------------------------------------------------
   NAVIGATION : deux paliers avant le menu coulissant
   ---------------------------------------------------------------------
   La barre du haut contient le logo, six onglets et le bouton d'appel :
   il lui faut environ 1080 px. Entre 1081 et 1240 px on resserre les
   espacements ; en dessous de 1080 px on bascule sur le menu coulissant.
   Sans ce premier palier, les onglets et le bouton se chevauchaient
   avant l'apparition du bouton burger.
   --------------------------------------------------------------------- */

@media (min-width: 1081px) and (max-width: 1240px) {
  .entete__interieur {
    gap: var(--cjy-esp-sm);
  }

  .nav__lien {
    padding-inline: 0.5rem;
    font-size: var(--cjy-txt-sm);
  }

  .nav__lien::after {
    left: 0.5rem;
    right: 0.5rem;
  }

  .entete__actions {
    padding-left: var(--cjy-esp-2xs);
    margin-left: 0;
  }

  .entete__actions .bouton {
    padding-inline: 0.85rem;
  }
}

/* --- Jusqu'à 1080 px : la navigation passe en menu coulissant --------- */
@media (max-width: 1080px) {

  .nav,
  .entete__actions {
    display: none;
  }

  .burger {
    display: flex;
  }
}

/* --- Jusqu'à 1099 px : tablettes paysage et petits portables ---------- */
@media (max-width: 1099px) {

  .hero__interieur {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cjy-esp-xl);
  }

  .hero__titre {
    max-width: 20ch;
  }

  .pole__corps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cjy-esp-md);
  }

  .colonnes,
  .colonnes--inverse {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cjy-esp-lg);
  }

  .engagements {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cjy-esp-lg);
  }

  .limites {
    position: static;
  }

  .contact {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact__aside {
    position: static;
  }

  .pied__haut {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cjy-esp-lg);
  }
}

/* --- Jusqu'à 899 px : la navigation bascule en menu latéral ----------- */
@media (max-width: 899px) {

  :root {
    --cjy-hauteur-entete: var(--cjy-hauteur-entete-mobile);
  }

  .grille--2,
  .grille--3,
  .grille--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .etapes {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cjy-esp-md);
  }

  .chiffres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cjy-esp-sm);
  }

  .chiffre {
    padding-left: var(--cjy-esp-xs);
  }

  .profil {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cjy-esp-sm);
  }

  .profil__titre {
    position: static;
  }

  /* Le sommaire des compétences repasse dans le flux, en bandeau. */
  .sommaire {
    position: static;
    margin-bottom: var(--cjy-esp-lg);
  }

  .sommaire__liste {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-left: none;
    border-bottom: 1px solid var(--cjy-bordure);
    padding-bottom: 1px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sommaire__liste::-webkit-scrollbar {
    display: none;
  }

  .sommaire__lien {
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    margin-left: 0;
    margin-bottom: -1px;
    padding-inline: var(--cjy-esp-xs);
  }

  .sommaire__lien:hover {
    border-left: none;
    border-bottom-color: var(--cjy-bordure-forte);
  }

  .sommaire__lien.est-actif {
    border-left: none;
    border-bottom-color: var(--cjy-accent);
  }

  .appel {
    padding: var(--cjy-esp-lg) var(--cjy-esp-md);
  }

  .contact__formulaire {
    padding: var(--cjy-esp-md);
  }
}

/* --- Jusqu'à 639 px : téléphones ------------------------------------- */
@media (max-width: 639px) {

  .grille--2,
  .grille--3,
  .grille--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .champs--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .chiffres {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cjy-esp-md);
  }

  .domaines,
  .partenaires,
  .publications,
  .equipe {
    grid-template-columns: minmax(0, 1fr);
  }

  .pied__haut {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cjy-esp-lg);
    padding-block: var(--cjy-esp-xl);
  }

  .pied__bas {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cjy-esp-xs);
  }

  .pole__entete {
    flex-direction: column;
    gap: var(--cjy-esp-xs);
  }

  .hero__panneau {
    padding: var(--cjy-esp-md);
  }

  .confirmation,
  .formulaire-ferme {
    padding: var(--cjy-esp-lg) var(--cjy-esp-md);
  }

  /* Les boutons occupent toute la largeur, plus faciles à atteindre. */
  .boutons .bouton {
    width: 100%;
  }

  .bandeau-fermeture__interieur {
    align-items: flex-start;
  }

  .bandeau-fermeture__icone {
    margin-top: 0.15em;
  }

  .instagram {
    padding: var(--cjy-esp-sm);
  }

  .instagram__action {
    margin-left: 0;
    width: 100%;
    margin-top: var(--cjy-esp-2xs);
  }

  .instagram__entete {
    flex-wrap: wrap;
  }
}

/* --- Jusqu'à 380 px : très petits écrans ------------------------------ */
@media (max-width: 380px) {

  .logo__nom {
    font-size: 13px;
  }

  .logo__lieu {
    font-size: 9px;
  }

  .equipe,
  .partenaires {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Écrans tactiles : pas d'effet de survol -------------------------- */
@media (hover: none) {
  .carte--cliquable:hover,
  .domaine:hover,
  .partenaire:hover,
  .publication:hover {
    transform: none;
    box-shadow: none;
  }

  .partenaire:hover .partenaire__logo img {
    filter: grayscale(1);
    opacity: 0.7;
  }
}


/* =====================================================================
   30. IMPRESSION
   ===================================================================== */

@media print {

  .entete,
  .burger,
  .menu-mobile,
  .voile,
  .pied__reseaux,
  .bandeau-fermeture,
  .lien-evitement,
  .boutons,
  .hero__actions,
  .appel__actions {
    display: none !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  .section,
  .hero,
  .page-entete {
    padding-block: 1.2rem;
  }

  .carte,
  .domaine,
  .encart,
  .pole__exemples {
    border: 1px solid #CCCCCC;
    box-shadow: none;
    break-inside: avoid;
  }

  h1, h2, h3 {
    break-after: avoid;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #555555;
  }
}