/* ==========================================================================
   DCM CLEAN — Feuille de style unique
   Aucune dépendance externe, aucun appel réseau : les polices sont dans
   /assets/fonts, servies depuis votre propre domaine.
   Pour changer une couleur ou un espacement : une seule ligne à modifier
   dans la section « RÉGLAGES » ci-dessous, et tout le site suit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. POLICES — Wix Madefor, la police du site actuel.
   Dessinée par Dalton Maag, publiée sous licence libre SIL Open Font
   License 1.1 (le texte de la licence est dans /assets/fonts/OFL.txt).
   Les fichiers sont hébergés chez nous : aucune requête ne part chez Google,
   donc aucune donnée de visiteur ne fuite — c'est ce qui a valu des
   condamnations en Europe aux sites qui appellent Google Fonts en ligne.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Wix Madefor Display";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/wix-madefor-display-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Wix Madefor Display";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/wix-madefor-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Wix Madefor Text";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/wix-madefor-text-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Wix Madefor Text";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/wix-madefor-text-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. RÉGLAGES

   Palette construite à partir des bleus du logo — la goutte, son dégradé et
   le mot « DCM CLEAN ». Le chiffre entre parenthèses est le contraste sur le
   fond indiqué : il faut au moins 4,5 pour du texte courant, 3 pour du grand
   texte (norme d'accessibilité WCAG 2.2 AA). Ces valeurs ont été mesurées,
   pas estimées.
   -------------------------------------------------------------------------- */
:root {
  /* --- Bleus, du plus profond au plus clair ------------------------------ */
  --marine:      #08203A;   /* fonds sombres et titres      (16,4 sur blanc) */
  --marine-800:  #0D2E4F;   /* dégradés                     (13,8 sur blanc) */
  --encre:       #164468;   /* texte de titre               (10,2 sur blanc) */
  --bleu:        #2B5672;   /* relevé du site actuel         (7,9 sur blanc) */
  --bleu-vif:    #3E72AF;   /* le mot du logo, boutons       (5,0 sur blanc) */
  --goutte:      #4B83C3;   /* la goutte du logo   — grand texte uniquement  */
  --bleu-300:    #7FA9D8;   /* décor, et texte sur marine    (6,7 sur marine)*/
  --bleu-200:    #ABC5E3;   /* dégradé clair du logo                        */
  --voile:       #DCE9F6;   /* filets sur fond clair                        */
  --brume:       #F1F6FC;   /* fond de section alterné                      */

  /* --- Éclat. Réservé aux petits accents graphiques ---------------------- */
  /* L'azur ne passe PAS en texte sur blanc (2,8). Il sert de trait, de
     pastille, de soulignement — jamais de texte, sauf sur fond marine. */
  --azur:        #00A5E5;

  /* --- Texte ------------------------------------------------------------- */
  --texte:       #16303F;   /* texte courant               (12,4 sur blanc)  */
  --texte-2:     #54697E;   /* texte secondaire             (5,7 sur blanc)  */
  --sur-marine:  #A8C0D6;   /* texte secondaire sur marine  (8,7)            */
  --blanc:       #FFFFFF;

  /* --- Compatibilité avec les anciens noms ------------------------------- */
  --noir: var(--marine);
  --gris: var(--texte-2);
  --gris-clair: var(--bleu-300);
  --bordure: var(--voile);
  --fond: var(--blanc);
  --fond-alt: var(--brume);
  --fond-sombre: var(--marine);
  --bleu-marque: var(--bleu);
  --bleu-goutte: var(--goutte);
  --bleu-clair: var(--bleu-300);

  /* --- Typographie — auto-hébergée, cf. section 0 ------------------------ */
  --police: "Wix Madefor Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
            "Helvetica Neue", Arial, sans-serif;
  --police-titre: "Wix Madefor Display", "Wix Madefor Text", -apple-system,
            BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --police-titre-logo: "Iowan Old Style", "Palatino Linotype", Palatino,
            "Times New Roman", Georgia, serif;

  /* --- Rythme ------------------------------------------------------------ */
  --largeur-max: 1440px;
  --gouttiere:   clamp(1.25rem, 4vw, 4rem);
  --section-y:   clamp(4.5rem, 10vw, 9rem);
  --rayon:       10px;      /* arrondi unique, partout */
  --rayon-s:     6px;

  /* --- Ombres. Teintées de bleu : une ombre grise sur un fond bleuté
         paraît sale. ---------------------------------------------------- */
  --ombre-s:  0 1px 2px rgba(8, 32, 58, .06), 0 2px 6px rgba(8, 32, 58, .05);
  --ombre-m:  0 2px 4px rgba(8, 32, 58, .05), 0 12px 28px -12px rgba(8, 32, 58, .22);
  --ombre-l:  0 4px 8px rgba(8, 32, 58, .06), 0 28px 60px -24px rgba(8, 32, 58, .34);

  /* --- Mouvement --------------------------------------------------------- */
  --transition: 220ms cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. RÉINITIALISATION
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  margin: 0 0 .55em;
  font-family: var(--police-titre);
  line-height: 1.08;
  color: var(--noir);
  font-weight: 700;
  text-wrap: balance;
  letter-spacing: -.022em;
}

h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.1rem, 1.7vw, 1.35rem); letter-spacing: -.01em; }

p { margin: 0 0 1.1rem; }
a { color: var(--noir); }

ul { margin: 0 0 1.1rem; padding-left: 1.1rem; }
li { margin-bottom: .45rem; }

:focus-visible {
  outline: 3px solid var(--bleu-goutte);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--fond-sombre); color: #fff;
  padding: .85rem 1.3rem; z-index: 999;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. MISE EN PAGE
   -------------------------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section      { padding-block: var(--section-y); }
.section--alt { background: var(--brume); }
.section--noir {
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(0,165,229,.16) 0%, transparent 60%),
    linear-gradient(165deg, var(--marine-800), var(--marine) 70%);
  color: #fff;
}
.section--noir p, .section--noir li { color: var(--sur-marine); }
.section--noir h2, .section--noir h3 { color: #fff; }

/* Petit intitulé en capitales au-dessus des titres de section */
.etiquette {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--police-titre);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  margin-bottom: 1.4rem;
}
/* Le petit trait d'azur qui ouvre chaque section : la signature colorée. */
.etiquette::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--azur);
  flex-shrink: 0;
}
.section--noir .etiquette { color: var(--bleu-300); }
.section--noir .etiquette::before { background: var(--azur); }

.titre-section {
  font-family: var(--police-titre);
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--marine);
  max-width: 22ch;
  text-wrap: balance;
}
.titre-section--large { max-width: 34ch; }

.mesure { max-width: 62ch; }

.grille    { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.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)); }

@media (max-width: 1050px) {
  .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .grille--2, .grille--3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grille--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   4. BOUTONS — pilules, comme sur le site actuel
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: .97rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.bouton .icone { width: 17px; height: 17px; flex-shrink: 0; }
.bouton:focus-visible { outline: 3px solid var(--azur); outline-offset: 3px; }

/* Bouton noir plein, texte en capitales — le « Obtenir un devis » de l'en-tête */
.bouton--noir {
  background: var(--fond-sombre);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 1.05rem 1.9rem;
}
.bouton--noir:hover { background: var(--bleu); box-shadow: var(--ombre-m); transform: translateY(-1px); }

/* Version large, pour la bannière d'accueil */
.bouton--grand { padding: 1.1rem 2.2rem; font-size: 1.02rem; font-weight: 600; }

/* Bouton contour fin — le « Obtenir un devis » du bandeau */
.bouton--contour {
  background: transparent;
  color: var(--noir);
  border-color: var(--noir);
}
.bouton--contour:hover { background: var(--fond-sombre); color: #fff; }

.bouton--clair {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.6);
}
.bouton--clair:hover { background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-2px); }

.bouton--blanc { background: #fff; color: var(--marine); box-shadow: var(--ombre-m); }
.bouton--blanc:hover { background: var(--brume); box-shadow: var(--ombre-l); transform: translateY(-2px); }

.boutons { display: flex; flex-wrap: wrap; gap: .85rem; }

/* La petite flèche du bouton d'en-tête */
.bouton .fleche { width: 14px; height: 14px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   5. EN-TÊTE
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(140%);
  transition: box-shadow var(--transition), background-color var(--transition);
}
/* Une ombre discrète n'apparaît qu'une fois la page défilée : posée, l'en-tête
   se détache du contenu ; en haut de page, il se fond dans la bannière. */
.entete--pose { box-shadow: var(--ombre-m); background: rgba(255,255,255,.97); }
.sentinelle-entete { position: absolute; top: 0; height: 1px; width: 1px; }

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1rem;
}

.logo { display: inline-block; flex-shrink: 0; text-decoration: none; }
.logo img { height: 74px; width: auto; }
@media (max-width: 600px) { .logo img { height: 56px; } }

.nav__liste {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__lien {
  text-decoration: none;
  color: var(--noir);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
}
.nav__lien { transition: color var(--transition), border-color var(--transition); }
.nav__lien:hover { color: var(--bleu-vif); border-bottom-color: var(--azur); }
.nav__lien[aria-current="page"] { color: var(--bleu); border-bottom-color: var(--azur); }
.nav__lien:focus-visible { outline: 3px solid var(--azur); outline-offset: 4px; }

.burger {
  display: none;
  background: none; border: 0; padding: .4rem;
  cursor: pointer; color: var(--noir);
}
.burger svg { width: 28px; height: 28px; }

@media (max-width: 960px) {
  .burger { display: block; }
  .entete { position: relative; }
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    background: #fff;
    border-block: 1px solid var(--bordure);
    box-shadow: 0 14px 34px rgba(0,0,0,.09);
    display: none;
  }
  .nav[data-ouvert="true"] { display: block; }
  .nav__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gouttiere) 1.6rem;
  }
  .nav__liste li { margin: 0; }
  .nav__lien {
    display: block;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--bordure);
  }
  .nav .bouton { margin-top: 1.2rem; justify-content: center; }
}

/* Sans JavaScript, le menu reste toujours déplié : le site fonctionne quand même */
.sans-js .burger { display: none; }
@media (max-width: 960px) {
  .sans-js .nav {
    position: static; display: block;
    box-shadow: none; border-top: 0;
  }
}

/* --------------------------------------------------------------------------
   6. BANNIÈRE D'ACCUEIL

   Deux panneaux à parts égales : le bleu marine porte le message, la photo
   occupe l'autre moitié jusqu'au bord de l'écran. La carte des chiffres
   chevauche la limite entre les deux — c'est ce léger décalage qui donne la
   profondeur, sans effet tape-à-l'œil.
   -------------------------------------------------------------------------- */
.banniere {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  position: relative;
  isolation: isolate;
}

.banniere__panneau {
  position: relative;
  background:
    radial-gradient(120% 90% at 12% 6%, rgba(0,165,229,.20) 0%, transparent 58%),
    linear-gradient(158deg, var(--marine-800) 0%, var(--marine) 62%);
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 76vh, 46rem);
  /* le texte s'aligne sur la colonne du reste du site */
  padding: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 4.5rem)
           clamp(7rem, 10vw, 9rem)
           max(var(--gouttiere), calc((100vw - var(--largeur-max)) / 2 + var(--gouttiere)));
}

/* Fine ligne d'azur en pied de panneau : la signature colorée de la marque. */
.banniere__panneau::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--azur), var(--goutte) 60%, transparent);
}

.banniere__texte { max-width: 34rem; }

.banniere__sur {
  margin: 0 0 1.4rem;
  font-family: var(--police-titre);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bleu-300);
}

.banniere__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.4rem, 4.6vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: #fff;
  text-wrap: balance;
}

.banniere__accroche {
  margin: 1.6rem 0 0;
  max-width: 30rem;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.6;
  color: var(--sur-marine);
}

.banniere__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }

.banniere__photo { position: relative; overflow: hidden; }
.banniere__photo picture { display: block; height: 100%; }
.banniere__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Un voile marine très léger en haut de la photo : il assied l'en-tête du
   site, qui flotte au-dessus, sans assombrir l'image. */
.banniere__photo::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 42%;
  background: linear-gradient(180deg, rgba(8,32,58,.42), transparent);
  z-index: 1; pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. CHIFFRES CLÉS — la carte qui chevauche la bannière
   -------------------------------------------------------------------------- */
.banniere__socle {
  grid-column: 1 / -1;
  margin-top: clamp(-5.5rem, -6vw, -4rem);
  z-index: 2;
  position: relative;
}

.chiffres-carte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: #fff;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-l);
  overflow: hidden;
}
.chiffres-carte li {
  padding: clamp(1.7rem, 2.6vw, 2.4rem) clamp(1.4rem, 2vw, 2rem);
  border-right: 1px solid var(--voile);
}
.chiffres-carte li:last-child { border-right: 0; }

.chiffre__valeur {
  display: block;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.2vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--bleu-vif);
}
.chiffre__unite {
  font-size: .48em;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: .18em;
  color: var(--goutte);
}
.chiffre__libelle {
  margin: .7rem 0 0;
  font-size: .89rem;
  line-height: 1.45;
  color: var(--texte-2);
}

/* Ancienne grille de chiffres, encore utilisée sur la page « À propos ». */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.8rem, 3vw, 3rem);
}
.chiffres .chiffre__valeur { font-size: clamp(2rem, 3vw, 2.7rem); }

/* --- Bannière sur écran étroit : tout s'empile ------------------------- */
@media (max-width: 900px) {
  .banniere { grid-template-columns: 1fr; }
  .banniere__panneau {
    min-height: 0;
    padding: clamp(3rem, 9vw, 4.5rem) var(--gouttiere) clamp(3rem, 9vw, 4rem);
    order: 2;
  }
  .banniere__photo { order: 1; aspect-ratio: 3 / 2; }
  .banniere__socle { order: 3; margin-top: 0; padding-block: 2rem; }
  .chiffres-carte { box-shadow: var(--ombre-m); }
  .chiffres-carte li { border-right: 0; border-bottom: 1px solid var(--voile); }
  .chiffres-carte li:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   8. CARTES ET RÉALISATIONS
   -------------------------------------------------------------------------- */
.carte {
  position: relative;
  background: #fff;
  border: 1px solid var(--voile);
  border-radius: var(--rayon);
  padding: 2.1rem 1.9rem;
  height: 100%;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
/* Un liseré d'azur se déploie en haut de la carte au survol. */
.carte::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--azur), var(--goutte));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
a.carte { text-decoration: none; color: inherit; display: block; }
a.carte:hover, a.carte:focus-visible {
  border-color: var(--bleu-200);
  transform: translateY(-4px);
  box-shadow: var(--ombre-m);
}
a.carte:hover::before, a.carte:focus-visible::before { transform: scaleX(1); }
.section--alt .carte { border-color: var(--voile); }

.carte__num {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--gris-clair);
  margin-bottom: 1.6rem;
}
.carte h3, .carte h2 { font-size: 1.15rem; margin-bottom: .55rem; color: var(--marine); }
.carte p  { color: var(--gris); font-size: .95rem; margin-bottom: 0; }
.carte ul { color: var(--gris); font-size: .94rem; margin-bottom: 0; }

/* Réalisations : photo + légende dessous, sobre */
.realisation { display: block; text-decoration: none; color: inherit; }
/* Le cadre découpe l'image, l'image grandit dedans : c'est ce léger
   mouvement qui donne vie à la grille sans l'agiter. */
.realisation picture {
  display: block;
  overflow: hidden;
  border-radius: var(--rayon);
  margin-bottom: 1.2rem;
  background: var(--brume);
}
.realisation img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 520ms cubic-bezier(.22,.61,.36,1);
}
.realisation:hover img { transform: scale(1.055); }
.realisation__client {
  display: block;
  font-family: var(--police-titre);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  margin-bottom: .5rem;
}
.realisation h3 { font-size: 1.18rem; margin-bottom: .3rem; color: var(--marine); }
.realisation p  { color: var(--gris); font-size: .93rem; margin: 0; }

/* Bandeau clients */
/* Bandeau des logos clients.
   Chaque logo est déjà normalisé dans une boîte identique par l'outil
   tools/logos-clients.mjs. Ici on se contente de les aligner : la boîte de
   130 × 44 px donne le même poids visuel à un mot large et à un carré.
   Les logos restent en couleur : la plupart des chartes de marque interdisent
   de les recolorer, y compris en niveaux de gris. */
.clients {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem clamp(2.5rem, 6vw, 4.5rem);
}
.clients li {
  width: 130px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Le <picture> s'intercale entre le <li> et l'image : un max-height en
   pourcentage se résoudrait contre lui, pas contre la boîte. D'où des valeurs
   explicites, qui ne dépendent d'aucun parent. */
.clients picture { display: contents; }
.clients img {
  max-width: 130px;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Frise chronologique de la page « À propos ». Une liste numérotée <ol> :
   l'ordre porte une information réelle, ce n'est pas de la décoration. */
.frise {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--bordure);
  border: 1px solid var(--bordure);
}
.frise li {
  background: var(--fond);
  padding: 1.6rem 1.4rem;
}
.frise__annee {
  display: block;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--bleu-marque);
}
.frise__fait {
  margin: .6rem 0 0;
  font-size: .95rem;
  color: var(--texte);
}

/* Le slogan de la page d'accueil est composé en italique. On passe par une
   classe plutôt que par la balise <em> : <em> signifie « insistance » et serait
   lu comme tel par un lecteur d'écran, alors qu'ici l'italique est un choix
   purement graphique. */
.hero__slogan { font-style: italic; }

/* --------------------------------------------------------------------------
   8 bis. MOUVEMENT

   Les blocs marqués data-reveal montent de quelques pixels en apparaissant.
   Deux protections absolues : sans JavaScript (classe « sans-js »), et si le
   visiteur a demandé à limiter les animations, tout s'affiche normalement.
   Une animation ne doit jamais pouvoir cacher du contenu.
   -------------------------------------------------------------------------- */
/* L'apparition est faite en CSS pur, par une animation liée au défilement.
   Aucun JavaScript n'intervient — et c'est délibéré. Une apparition pilotée
   par script part d'un contenu invisible : si le script échoue, si l'onglet
   est en arrière-plan au chargement, ou si le navigateur diffère le rendu,
   le texte reste caché pour toujours. Ici, l'état par défaut est VISIBLE.
   Seuls les navigateurs qui savent animer au défilement jouent l'effet ;
   les autres affichent la page normalement. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      animation: apparition linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes apparition {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .realisation:hover img { transform: none; }
  .bouton:hover, a.carte:hover { transform: none; }
}

/* Lien avec flèche, pour les renvois en fin de section. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1rem;
  color: var(--bleu-vif);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--voile);
  transition: color var(--transition), border-color var(--transition);
}
.lien-fleche .fleche { width: 15px; height: 15px; transition: transform var(--transition); }
.lien-fleche:hover { color: var(--marine); border-bottom-color: var(--azur); }
.lien-fleche:hover .fleche { transform: translate(3px, -3px); }
.section--noir .lien-fleche { color: var(--bleu-300); border-bottom-color: rgba(255,255,255,.25); }
.section--noir .lien-fleche:hover { color: #fff; border-bottom-color: var(--azur); }

/* Grille du savoir-faire : cinq cartes. Trois par ligne puis deux, plutôt
   que cinq serrées — une carte trop étroite devient illisible. */
.grille--savoir { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1050px) { .grille--savoir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grille--savoir { grid-template-columns: 1fr; } }

/* Engagements, sur fond marine. Le pictogramme est décoratif : il porte
   aria-hidden, donc un lecteur d'écran lit le titre et saute l'emoji. */
.engagements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
@media (max-width: 1050px) { .engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .engagements { grid-template-columns: 1fr; } }

.engagement__picto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: 1.1rem;
  font-size: 1.6rem;
  line-height: 1;
  border-radius: var(--rayon);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
}
.engagements h3 { color: #fff; font-size: 1.15rem; margin-bottom: .5rem; }
.engagements p  { color: var(--sur-marine); font-size: .95rem; margin: 0; }

/* --------------------------------------------------------------------------
   8 ter. PILIERS ET MÉTHODE — page « Nos missions »
   -------------------------------------------------------------------------- */
.piliers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  background: var(--voile);
  border: 1px solid var(--voile);
  border-radius: var(--rayon);
  overflow: hidden;
}
@media (max-width: 900px) { .piliers { grid-template-columns: 1fr; } }

.pilier {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.4rem;
  background: #fff;
  padding: clamp(1.8rem, 3vw, 2.6rem);
}
@media (max-width: 560px) { .pilier { grid-template-columns: 1fr; gap: 1rem; } }

.pilier__picto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem; height: 3.2rem;
  font-size: 1.5rem; line-height: 1;
  border-radius: var(--rayon);
  background: var(--brume);
  border: 1px solid var(--voile);
}
.pilier__num {
  display: block;
  font-family: var(--police-titre);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--goutte);
  margin-bottom: .35rem;
}
.pilier h3 { font-size: 1.3rem; margin-bottom: .6rem; color: var(--marine); }
.pilier p  { color: var(--texte-2); font-size: .97rem; margin-bottom: 1.1rem; }
.pilier ul { margin: 0 0 0 1.1rem; padding: 0; color: var(--texte-2); font-size: .93rem; }
.pilier li { margin-bottom: .45rem; }
.pilier li::marker { color: var(--goutte); }

/* Les étapes sont numérotées par le CSS : l'ordre porte une information
   réelle, c'est un déroulé, pas une liste décorative. */
.etapes {
  counter-reset: etape;
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.2rem);
}
.etapes li {
  position: relative;
  padding-top: 3.4rem;
  margin: 0;
}
.etapes li::before {
  counter-increment: etape;
  content: counter(etape);
  position: absolute;
  top: 0; left: 0;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: var(--bleu-vif);
  border-radius: 50%;
}
/* Le trait qui relie les étapes entre elles. */
.etapes li::after {
  content: "";
  position: absolute;
  top: 1.25rem; left: 3.1rem; right: -1.4rem;
  height: 2px;
  background: linear-gradient(90deg, var(--bleu-200), transparent);
}
.etapes li:last-child::after { display: none; }
@media (max-width: 760px) { .etapes li::after { display: none; } }
.etapes h3 { font-size: 1.08rem; margin-bottom: .45rem; color: var(--marine); }
.etapes p  { color: var(--texte-2); font-size: .94rem; margin: 0; }

/* Vidéos du blog. Le lecteur natif du navigateur suffit : pas de bibliothèque
   à charger, pas de traceur, et les commandes restent accessibles au clavier. */
.videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.8rem, 3vw, 2.8rem);
}
.video { margin: 0; }
.video video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--marine);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-m);
}
.video figcaption { margin-top: 1.1rem; }
.video figcaption h3 { font-size: 1.1rem; margin-bottom: .4rem; color: var(--marine); }
.video figcaption p  { color: var(--texte-2); font-size: .93rem; margin: 0; }

/* --------------------------------------------------------------------------
   9. APPEL À L'ACTION
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon);
  background:
    radial-gradient(80% 130% at 85% 8%, rgba(0,165,229,.26) 0%, transparent 62%),
    linear-gradient(152deg, var(--marine-800) 0%, var(--marine) 68%);
  color: #fff;
  padding: clamp(3rem, 6.5vw, 5.5rem) clamp(1.5rem, 5vw, 4.5rem);
  text-align: center;
}
/* Une goutte en filigrane, très pâle, reprise du logo. */
.cta::before {
  content: "";
  position: absolute;
  right: -6%; bottom: -38%;
  width: 26rem; height: 26rem;
  background: radial-gradient(circle at 50% 42%, rgba(75,131,195,.30) 0%, transparent 62%);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta h2 {
  color: #fff;
  font-family: var(--police-titre);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.cta p  { color: var(--sur-marine); max-width: 56ch; margin-inline: auto; }
.cta .boutons { justify-content: center; margin-top: 2rem; }

/* --------------------------------------------------------------------------
   10. FORMULAIRES
   -------------------------------------------------------------------------- */
.formulaire { display: grid; gap: 1.3rem; max-width: 660px; }
.champ { display: grid; gap: .45rem; }
.champ label { font-weight: 600; font-size: .9rem; color: var(--marine); }
.champ .aide { font-size: .84rem; color: var(--gris); }

.champ input,
.champ select,
.champ textarea {
  font: inherit;
  font-size: 1rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--voile);
  border-radius: var(--rayon-s);
  background: var(--brume);
  color: var(--texte);
  width: 100%;
  transition: border-color var(--transition), background-color var(--transition),
              box-shadow var(--transition);
}
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--bleu-200); }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--bleu-vif);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,165,229,.18);
}
.champ textarea { min-height: 160px; resize: vertical; }
.champ--requis label::after { content: " *"; color: #B3261E; }

.consentement {
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: .89rem; color: var(--gris);
}
.consentement input { width: auto; margin-top: .3rem; flex-shrink: 0; }

/* Piège à robots : invisible pour un humain, rempli par les programmes de spam */
.pot-de-miel {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important; width: 0 !important;
  overflow: hidden !important;
}

.erreur { color: #B3261E; font-size: .88rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   11. EN-TÊTE DE PAGE INTERNE
   -------------------------------------------------------------------------- */
/* Les pages intérieures s'ouvrent sur un aplat bleu très clair : la page
   commence par une respiration colorée plutôt que par du blanc nu. */
.page-entete {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3.5rem);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
/* La classe est posée sur un conteneur centré et donc limité en largeur ;
   ce calque déborde jusqu'aux bords de l'écran pour que l'aplat couvre
   toute la largeur, y compris sur les très grands moniteurs. */
.page-entete::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(170deg, var(--brume), #fff 88%);
  border-bottom: 1px solid var(--voile);
  z-index: -1;
}
.page-entete > * { position: relative; }
.page-entete h1 {
  margin-bottom: 1rem;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  letter-spacing: -.025em;
  color: var(--marine);
}
.page-entete p  { color: var(--texte-2); max-width: 62ch; margin: 0; font-size: 1.1rem; }
.ariane a:hover { color: var(--bleu-vif); }

.ariane { font-size: .82rem; color: var(--texte-2); margin-bottom: 1.6rem; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; }
.ariane li { margin: 0; }
.ariane li::after { content: "/"; margin-left: .45rem; opacity: .5; }
.ariane li:last-child::after { content: ""; }
.ariane a { color: var(--gris); text-decoration: none; }
.ariane a:hover { color: var(--noir); }

/* --------------------------------------------------------------------------
   12. BLOC SERVICE DÉTAILLÉ
   -------------------------------------------------------------------------- */
.service {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 5.5vw, 4.5rem);
  border-top: 1px solid var(--voile);
  scroll-margin-top: 110px;
}
/* Les photos de chantier sont l'argument le plus fort de la page : on leur
   donne de l'air, un cadre arrondi et un léger mouvement au survol. */
.service__visuel picture { display: block; overflow: hidden; border-radius: var(--rayon); background: var(--brume); }
.service img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 620ms cubic-bezier(.22,.61,.36,1);
}
.service:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .service:hover img { transform: none; } }

/* Le numéro d'ordre devient un repère bleu, aligné sur les étiquettes. */
.carte__num, .service .carte__num {
  display: inline-block;
  font-family: var(--police-titre);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--goutte);
}
.service:nth-child(even) .service__visuel { order: 2; }
@media (max-width: 860px) {
  .service { grid-template-columns: 1fr; }
  .service:nth-child(even) .service__visuel { order: 0; }
}

/* --------------------------------------------------------------------------
   13. PIED DE PAGE
   -------------------------------------------------------------------------- */
.pied {
  position: relative;
  background:
    radial-gradient(70% 100% at 82% 0%, rgba(0,165,229,.13) 0%, transparent 62%),
    linear-gradient(170deg, var(--marine-800), var(--marine) 72%);
  color: var(--sur-marine);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
  font-size: .93rem;
}
/* Le filet d'azur qui ferme la page, en écho à celui de la bannière. */
.pied::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--goutte) 40%, var(--azur));
}
.pied a { color: var(--sur-marine); text-decoration: none; transition: color var(--transition); }
.pied a:hover { color: #fff; }
.pied a:focus-visible { outline: 3px solid var(--azur); outline-offset: 3px; }
.pied h3 {
  color: #fff;
  font-family: var(--police-titre);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.pied__grille {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 860px) {
  .pied__grille { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .6rem; }
.pied__logo { display: inline-block; margin-bottom: 1.2rem; }
.pied__logo img { height: 64px; width: auto; }
.pied__bas {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.13);
  display: flex; flex-wrap: wrap;
  gap: .8rem 2rem; justify-content: space-between;
  font-size: .85rem; color: rgba(255,255,255,.55);
}

/* --------------------------------------------------------------------------
   14. CONTENU RÉDACTIONNEL (pages légales)
   -------------------------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.8rem; font-size: 1.5rem; }
.prose h3 { margin-top: 2rem; }
.prose .a-completer {
  background: #FFF6D4;
  border-bottom: 2px solid #E0BC00;
  padding: .1rem .4rem;
  font-weight: 600;
  color: #6A5300;
}

/* --------------------------------------------------------------------------
   15. BLOG
   -------------------------------------------------------------------------- */
.articles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}

.carte-article__lien {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.carte-article__lien:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.carte-article__lien:focus-visible { outline: 2px solid var(--bleu-marque); outline-offset: 4px; }
.carte-article picture {
  display: block;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--brume);
}
.carte-article img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
  transition: transform 520ms cubic-bezier(.22,.61,.36,1);
}
.carte-article__lien:hover img { transform: scale(1.055); }
.carte-article__date {
  margin: 1.1rem 0 .4rem;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
}
.carte-article h2 { font-size: 1.35rem; margin-bottom: .5rem; color: var(--marine); }
.carte-article__extrait { color: var(--gris); font-size: .96rem; margin: 0; }
.carte-article__cta {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--bleu-marque);
}

/* Corps d'un article. Une colonne de lecture étroite : au-delà d'une
   soixantaine de caractères par ligne, l'œil perd le début de la ligne
   suivante. */
.article { max-width: 68ch; }
.article__meta {
  font-size: .88rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gris);
}
.article__chapo {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--texte);
}
.article h2 { margin-top: 2.8rem; font-size: 1.55rem; }
.article h3 { margin-top: 2rem;   font-size: 1.15rem; }
.article p  { margin-bottom: 1.1rem; }
.article ul, .article ol { margin: 0 0 1.4rem 1.2rem; padding: 0; }
.article li { margin-bottom: .5rem; }

/* Ligne de secours sous les formulaires. Discrète, mais toujours présente :
   un prospect qui n'arrive pas à envoyer son message doit pouvoir vous joindre
   autrement plutôt que de partir chez un concurrent. */
.secours {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--bordure);
  font-size: .9rem;
  color: var(--gris);
}
.secours a { color: var(--bleu-marque); }

/* --------------------------------------------------------------------------
   16. CLASSES D'AJUSTEMENT

   Ces petites classes remplacent les attributs style="..." écrits directement
   dans les pages. Pourquoi ? Parce que la politique de sécurité du site
   interdit tout style écrit dans le HTML : c'est précisément ce mécanisme qui
   empêche un attaquant d'injecter du code dans une page. Un style en ligne
   serait purement et simplement ignoré par le navigateur, et la mise en page
   se déferait une fois le site en ligne.

   Vous n'avez normalement pas à y toucher.
   -------------------------------------------------------------------------- */
.u-ai-center { align-items:center; }
.u-ai-start { align-items:start; }
.u-c-rgba255255-fs-95rem { color:rgba(255,255,255,.72); font-size:.95rem; }
.u-c-vargris { color:var(--gris); }
.u-c-vargris-mt-12rem { color:var(--gris); margin-top:1.2rem; }
.u-fs-13rem-fw-700-td-none { font-size:1.3rem; font-weight:700; text-decoration:none; }
.u-fs-85rem-c-vargris-m-0 { font-size:.85rem; color:var(--gris); margin:0; }
.u-fw-400 { font-weight:400; }
.u-m-0 { margin:0; }
.u-mb-12rem { margin-bottom:1.2rem; }
.u-mb-4rem { margin-bottom:.4rem; }
.u-ml-6rem { margin-left:.6rem; }
.u-mt-12rem { margin-top:1.2rem; }
.u-mt-15rem { margin-top:1.5rem; }
.u-mt-16rem { margin-top:1.6rem; }
.u-mt-18rem { margin-top:1.8rem; }
.u-mt-25rem { margin-top:2.5rem; }
.u-mt-25rem-ai-start { margin-top:2.5rem; align-items:start; }
.u-mt-2rem { margin-top:2rem; }
.u-mt-2rem-c-rgba255255 { margin-top:2rem; color:rgba(255,255,255,.72); }
.u-mt-3rem { margin-top:3rem; }
.u-mt-3rem-fs-9rem-c-vargris { margin-top:3rem; font-size:.9rem; color:var(--gris); }
.u-mt-clamp25rem { margin-top:clamp(2.5rem,5vw,4rem); }
.u-mt-clamp3rem6 { margin-top:clamp(3rem,6vw,5rem); }
.u-pb-varsection { padding-bottom:var(--section-y); }
.u-pt-0 { padding-top:0; }
.u-py-clamp4rem1 { padding-block:clamp(4rem,10vw,8rem); }
.u-ta-center { text-align:center; }

/* Tableau des données personnelles, page « Politique de confidentialité ». */
.table-donnees { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table-donnees thead tr { text-align: left; border-bottom: 2px solid var(--noir); }
.table-donnees tbody tr { border-bottom: 1px solid var(--bordure); }
.table-donnees th,
.table-donnees td { padding: .7rem .8rem .7rem 0; text-align: left; vertical-align: top; }
.table-donnees th:last-child,
.table-donnees td:last-child { padding-right: 0; }

/* --------------------------------------------------------------------------
   17. IMPRESSION
   -------------------------------------------------------------------------- */
@media print {
  .entete, .pied, .cta, .burger { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}