/*
Theme Name: ES-IT
Theme URI: https://es-it.fr
Author: Emmanuel Saintier
Author URI: https://es-it.fr
Description: Thème sur mesure pour ES-IT — infrastructure, cloud, cybersécurité. Positionnement expert indépendant TPE/PME Île-de-France. Direction graphique « Bento sobre » : fond clair texturé, tuiles de tailles inégales à angles courts, une seule couleur d accent (le rouge ES-IT #E84043) et l encre profonde.
Version: 2.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: esit
*/

/* ==========================================================================
   Polices — Plus Jakarta Sans, variable, hébergée sur le serveur.
   Deux fichiers (49 Ko) couvrent toutes les graisses de 200 à 800.
   Aucun appel à Google : rien ne sort du site, pas de cookie tiers.
   ========================================================================== */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/plus-jakarta-sans-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;
}

/* ==========================================================================
   Design tokens — alignés sur ES-IT_reperes_visuels (6 octobre 2026)
   --------------------------------------------------------------------------
   Les cinq couleurs de la charte sont reprises à l'identique :
     #E84043 rouge · #1C1B1F encre · #EFEAE4 beige · #F4F2F0 fond clair
     #53535B gris. Le rouge est exactement celui du logo (vérifié au pixel
     dans favicon.png).

   Le rouge se décline en trois jetons, et ce n'est pas un doublon : #E84043
   ne tient que 4,0:1 sur blanc, sous le seuil de 4,5:1 exigé d'un texte de
   petit corps. Il reste donc la couleur identitaire, posée partout où elle
   est une SURFACE ou un GRAPHISME (seuil 3:1) ; deux déclinaisons plus
   sombres prennent le relais dès qu'un texte est en jeu.
     - --c-marque       identité : filigrane, pictogrammes, filets, puces.
     - --c-corail       remplissage sous un libellé blanc (4,52:1).
     - --c-corail-text  texte rouge sur fond clair (6,36:1 blanc, 5,32:1 beige).

   Deux registres, comme le prévoit la charte, avec la distinction retenue
   le 6 octobre : l'encre sert ici d'ENCART D'EMPHASE à l'intérieur du
   registre clair — elle ne fait pas basculer le support dans le registre
   d'alerte, qui reste réservé à ce qui peut mal tourner.
   ========================================================================== */
:root {
  /* Fonds et encres */
  --c-ground:        #EFEAE4;   /* fond général, beige de la charte — assez
                                   soutenu pour que les tuiles ressortent */
  --c-surface:       #FFFFFF;   /* tuiles */
  --c-aplat:         #F4F2F0;   /* charte : « fond clair · blocs et aplats ».
                                   Les petits aplats posés SUR une tuile
                                   blanche, où le beige du fond jurerait. */
  --c-ink:           #1C1B1F;   /* charte : encre. Texte principal et encarts
                                   d'emphase (17,1:1 sur blanc) */
  --c-muted:         #53535B;   /* charte : gris. 6,4:1 sur le fond beige,
                                   soit mieux que le #5F5964 d'avant (5,7:1) */
  --c-border:        #E6E1DB;

  /* Couleurs d'accent */
  --c-marque:        #E84043;   /* LE rouge ES-IT, celui du logo. Surfaces et
                                   graphismes seulement : 4,0:1 sur blanc, au
                                   -dessus du seuil de 3:1 d'un élément non
                                   textuel, en dessous des 4,5:1 d'un texte. */
  --c-corail:        #D93B3E;   /* remplissage sous un libellé blanc. Le rouge
                                   de marque y tomberait à 4,0:1 ; assombri
                                   d'un cheveu il passe à 4,52:1, et reste à
                                   l'œil celui du logo. */
  --c-corail-text:   #B32B2E;   /* texte rouge sur fond clair. Teinte du rouge
                                   de marque, assombrie jusqu'à 6,36:1 — il
                                   faut tenir aussi sur le halo pêche du héros,
                                   où #BE2F28 tombait à 4,4:1. */
  --c-corail-hover:  #BE3034;
  --c-on-dark:       #B9B2A9;   /* texte secondaire sur encart sombre : le
                                   beige de la charte, désaturé (8,2:1) */
  --c-sur-sombre:    #EFEAE4;   /* charte : « beige · texte sur fond sombre ».
                                   Remplace le blanc pur dans les encarts en
                                   encre (14,3:1) et les relie au fond de page. */
  --c-corail-clair:  #FF8A80;   /* l'accent, version fond sombre. Le rouge de
                                   marque n'y tient que 4,28:1, sous le seuil
                                   d'un texte ; éclairci il monte à 7,5:1. Un
                                   seul élément par encart, comme sur clair. */

  /* Alias conservé : page-qui-je-suis.php l'appelle en style inline. */
  --c-white:         #FFFFFF;

  /* Mesures */
  --container:  1160px;
  --radius-lg:  14px;           /* héros, grandes tuiles */
  --radius-md:  10px;           /* cartes */
  --radius-sm:  8px;            /* champs, petits éléments */
  --gap:        14px;
  --sp:         66px;           /* respiration verticale entre sections */

  /* Le header pilote la taille du logo, la position du menu mobile
     et le décalage des ancres. Une seule valeur à changer. */
  --header-h:   124px;
  --logo-h:     102px;
}

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

html { scroll-behavior: smooth; }

/* Le fond est entièrement immobile : la couleur de base est posée sur le
   body, et tout le décor (halos + trame de points) vit dans une seule
   couche fixe, body::before. La page défile par-dessus un décor qui ne
   bouge pas. Les tuiles blanches passent au-dessus et restent nettes. */
body {
  margin: 0;
  background-color: var(--c-ground);
  color: var(--c-ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Décor de fond : trois halos de couleur, puis la trame de points par-dessous.
   Cet élément est fixé au repère de l'écran, donc rien ne bouge au défilement.
   C'est volontairement un élément plutôt qu'un background-attachment: fixed
   sur le body : Safari iOS gère mal cette propriété (mauvaise mise à
   l'échelle et à-coups au défilement). Ici, aucun de ces problèmes.

   Ordre des couches : la première listée est au-dessus. Les halos teintent
   donc le grain, comme avant.

   La matière est un GRAIN IRRÉGULIER, pas une trame de points. Un motif
   régulier crée une vibration à l'œil dès qu'on fait défiler la page ;
   un bruit organique donne la même matière sans ce battement. Il est
   généré directement en CSS par un filtre SVG, sans fichier ni requête.

   Pour le doser, un seul nombre : l'opacité du rect, en fin de ligne.
   .12 = à peine perceptible, .22 = actuel, .35 = papier très marqué. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(900px 640px at 4% -10%,  rgba(255, 198, 145, .40) 0%, rgba(255, 198, 145, 0) 60%),
    radial-gradient(880px 660px at 98% 10%,  rgba(255, 172, 148, .26) 0%, rgba(255, 172, 148, 0) 62%),
    radial-gradient(820px 640px at 46% 112%, rgba(255, 145, 135, .22) 0%, rgba(255, 145, 135, 0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.22'/%3E%3C/svg%3E");
  background-size: auto, auto, auto, 200px 200px;
}

/* Le décor est purement ornemental : on le retire pour qui demande un
   contraste renforcé, plutôt que de lui imposer du bruit derrière le texte. */
@media (prefers-contrast: more) {
  body::before { display: none; }
}

img { max-width: 100%; height: auto; }

a { color: var(--c-corail-text); }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: #FBE9E8; color: var(--c-ink); }

:focus-visible {
  outline: 2px solid var(--c-marque);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Mise en page
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section-pad { padding: var(--sp) 0; }

/* Décalage des ancres : le header peut être visible au moment du saut,
   on réserve donc sa hauteur pour qu'aucun titre ne se retrouve dessous. */
section[id] { scroll-margin-top: var(--header-h); }
body.admin-bar section[id] { scroll-margin-top: calc(var(--header-h) + 32px); }

/* Les cercles décoratifs appartenaient à l'ancienne direction graphique.
   Bento utilise les dégradés du héros à la place. Le balisage reste en
   place dans les gabarits : il suffira de retirer cette règle pour
   les faire réapparaître. */
.deco-circle { display: none; }

/* Bento aligne à gauche. Les gabarits portent encore .text-center,
   neutralisé ici là où la nouvelle mise en page l'exige. */
.section-head.text-center,
.cta-band .text-center { text-align: left; }

/* ==========================================================================
   En-tête et navigation
   ========================================================================== */
/* Le header laisse transparaître la trame et les halos, en les floutant :
   il fait partie du fond au lieu de le masquer par un aplat.

   Son opacité s'adapte à ce qui passe dessous. En haut de page il n'y a que
   le fond clair derrière lui : il peut être très transparent. Dès qu'on
   défile, des tuiles sombres viennent glisser en dessous (bandeau contact,
   tuile noire des chiffres, carte corail) — il se densifie alors pour que
   le menu reste lisible. Sans cela le texte tombait à 3,5:1 au passage
   d'une tuile noire, sous le seuil de 4,5:1.

   Les classes .is-floating et .is-hidden sont posées par assets/js/main.js. */
/* ── HEADER ESCAMOTABLE ────────────────────────────────────────────────
   Trois états, pilotés par assets/js/main.js :

   1. en haut de page — visible et totalement transparent, posé sur le
      fond texturé : aucune barre, rien qui coupe la bannière ;
   2. on descend      — il s'efface vers le haut, l'écran entier est au
      contenu ;
   3. on remonte      — il revient immédiatement, cette fois avec un fond
      et une bordure, puisqu'il flotte alors au-dessus du contenu.

   Le menu ne s'escamote jamais tant qu'il est ouvert.
   ──────────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: transform .28s ease, background .25s ease, border-color .25s ease;
}
/* Visible, mais plus en haut de page : il lui faut un fond pour rester
   lisible par-dessus le contenu qui défile dessous. */
.site-header.is-floating {
  background: rgba(239, 234, 228, .88);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--c-border);
}
/* On descend : il sort de l'écran. */
.site-header.is-hidden { transform: translateY(-100%); }
/* Menu déroulant ouvert : jamais escamoté, et fond plein. */
.site-header.is-open {
  transform: none;
  background: rgba(239, 234, 228, .97);
  border-bottom-color: var(--c-border);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-floating { background: var(--c-ground); }
}

.site-header > .container {
  display: flex;
  align-items: center;
  gap: 26px;
  height: var(--header-h);
}

.site-logo { display: inline-flex; align-items: center; flex: none; }
.site-logo img,
.site-logo-img,
.custom-logo {
  display: block;
  height: var(--logo-h);
  width: auto;
}

.main-nav { margin-left: auto; }
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav a {
  /* Encre volontairement plus soutenue que --c-muted : le fond du header
     étant translucide, le texte doit rester lisible même lorsqu'une tuile
     sombre défile derrière (5,9:1 dans ce cas le plus défavorable). */
  color: #4A4A52;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .18s;
}
.main-nav a:hover { color: var(--c-ink); }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a { color: var(--c-ink); font-weight: 700; }

/* Le dernier élément du menu est toujours « Contact ». On le cible par sa
   position plutôt que par sa classe : le menu de secours du thème
   (esit_fallback_menu) ne pose pas .nav-cta, contrairement à un menu
   configuré dans WordPress. Les deux cas sont ainsi couverts. */
.main-nav > ul > li:last-child > a,
.nav-cta {
  background: var(--c-ink);
  color: var(--c-sur-sombre) !important;
  border-radius: var(--radius-sm);
  padding: 11px 20px;
  font-weight: 700;
}
.main-nav > ul > li:last-child > a:hover,
.nav-cta:hover { background: #2F2D33; color: var(--c-sur-sombre); }

/* « Besoin d'aide ? » : teinte corail plutôt que le noir du bouton Contact.
   Deux boutons pleins côte à côte se disputeraient l'attention ; ici l'un
   appelle (Contact), l'autre secourt (aide). Le texte utilise la variante
   assombrie du corail, seule à tenir le contraste sur fond clair. */
.main-nav .menu-aide > a {
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  background: #FBE9E8;
  color: var(--c-corail-text) !important;
  font-weight: 700;
}
.main-nav .menu-aide > a:hover {
  background: var(--c-corail);
  color: var(--c-surface) !important;
}
/* --------------------------------------------------------------------------
   Sous-menu de la rubrique Services
   --------------------------------------------------------------------------
   Déroulé au survol et à la tabulation. Masqué par visibilité plutôt que par
   display:none : l'élément reste dans l'ordre de tabulation, et :focus-within
   l'ouvre quand on l'atteint au clavier. Aucune ligne de script.
   -------------------------------------------------------------------------- */
/* Le déplieur du sous-menu : caché sur grand écran, où le survol suffit. */
.sous-menu-deplieur { display: none; }

.main-nav .a-sous-menu > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
}

@media (min-width: 1024px) {
  .main-nav .a-sous-menu { position: relative; }
  .main-nav .sous-menu {
    position: absolute;
    top: 100%;
    z-index: 60;
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    /* Centré sous « Services » plutôt qu'aligné à gauche : à quatre rubriques
       côte à côte, un ancrage à gauche sortirait de l'écran à droite. */
    left: 50%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 34px -22px rgba(23, 20, 23, .35);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .main-nav .a-sous-menu:hover > .sous-menu,
  .main-nav .a-sous-menu:focus-within > .sous-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
  .main-nav .sous-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    white-space: nowrap;
  }
  /* Le trait du pictogramme suit la couleur du texte : rien à prévoir pour
     l'état survolé. */
  .main-nav .sous-menu-icone {
    flex: none;
    color: var(--c-marque);
  }
  .main-nav .sous-menu a:hover .sous-menu-icone { color: var(--c-corail-text); }
  .main-nav .sous-menu a:hover {
    background: var(--c-ground);
    color: var(--c-ink);
  }
}

/* Bouton hamburger — visible seulement en dessous de 1024 px */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  background: var(--c-ink);
  border-radius: 2px;
  transition: transform .22s, opacity .22s;
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { content: ""; top: -6px; margin-left: 0; left: 0; }
.nav-toggle span::after  { content: ""; top: 6px;  margin-left: 0; left: 0; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.btn-primary { background: var(--c-corail); color: var(--c-surface); }
.btn-primary:hover { background: var(--c-corail-hover); transform: translateY(-1px); }

/* Sur les tuiles sombres, le corail garde un écart suffisant avec le fond
   (3,8:1, au-dessus du seuil de 3:1 exigé pour un élément d'interface) et
   le texte blanc y reste lisible à 4,9:1. Inutile d'introduire une
   deuxième couleur pour cela. */
.cta-band .btn-primary,
.why .btn-primary { background: var(--c-corail); color: var(--c-surface); }
.cta-band .btn-primary:hover,
.why .btn-primary:hover { background: var(--c-corail-hover); }

/* ==========================================================================
   Héros — la tuile principale, posée sur le fond avec des halos doux
   ========================================================================== */
/* La bannière est une tuile posée SUR le fond, pas une continuation de
   celui-ci. Les teintes pêche et lilas appartiennent au décor de la page
   (body::before) : les reprendre ici à la même intensité faisait fondre
   la carte dans son fond, surtout sur mobile où elle est étroite.
   Elle reste donc quasi blanche, avec deux voiles très légers pour ne pas
   être plate, un liseré plus marqué et une ombre douce qui la décolle. */
.hero,
.page-hero {
  position: relative;
  width: min(100% - 44px, calc(var(--container) + 48px));
  margin: 20px auto 4px;
  border: 1px solid #E4DCD2;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(680px 300px at 6% -18%, #FFF1E2 0%, rgba(255,241,226,0) 58%),
    radial-gradient(620px 320px at 96% 0%,  #FDEFE9 0%, rgba(253,239,233,0) 60%),
    var(--c-surface);
  box-shadow: 0 20px 44px -30px rgba(74, 44, 30, .34);
  overflow: hidden;
}

/* La marque en filigrane, à droite de chaque bannière. Elle occupe le vide
   que laisse le texte sans jamais lui disputer la lecture : à cette opacité
   on la devine plus qu'on ne la lit, ce qui est tout le rôle d'un filigrane.

   Un ::after plutôt qu'une image dans le HTML : une seule règle habille les
   onze gabarits, et rien ne se répète de page en page. L'adresse arrive par
   --esit-marque, écrite dans l'en-tête par esit_meta_tags().

   Elle déborde du cadre, et le overflow:hidden de la tuile la rogne sur
   l'arrondi : une marque coupée se lit comme un motif, une marque entière
   posée dans un coin se lit comme un logo oublié là.

   Sous 900 px le texte reprend toute la largeur : le filigrane passerait
   derrière les mots, il s'efface donc. */
.hero::after,
.page-hero::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -5%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: var(--esit-marque) no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}
/* Deux tailles : la bannière d'accueil est haute et large, celles des
   pages intérieures tiennent en trois lignes. Une marque calibrée pour la
   première déborderait des secondes en haut et en bas, et on ne verrait
   plus qu'une bande. */
.hero::after      { width: clamp(340px, 38vw, 560px); }
.page-hero::after { width: clamp(200px, 22vw, 300px); }

/* Entre 900 et 1200 px, le texte occupe presque tout : la marque se fait
   plus petite pour rester à sa droite plutôt que de passer derrière la fin
   du paragraphe. */
@media (max-width: 1200px) {
  .hero::after      { width: clamp(280px, 30vw, 360px); }
  .page-hero::after { width: clamp(180px, 20vw, 240px); }
}
/* Sur un téléphone, le texte prend toute la largeur : il n'y a plus de vide à
   sa droite. Plutôt que de retirer la marque, on la fait descendre dans l'angle
   bas et déborder des deux côtés — on n'en voit qu'un fragment, qui se lit comme
   un motif. Et on l'éclaircit encore : elle passe sous les mots, elle ne doit
   pas se faire remarquer. */
@media (max-width: 900px) {
  .hero::after,
  .page-hero::after {
    top: auto;
    bottom: -34px;
    right: -34px;
    width: 260px;
    transform: none;
    opacity: .08;
  }
}

.hero .container,
.page-hero .container {
  max-width: none;
  padding: 64px 44px 58px;
}
.page-hero .container { padding-bottom: 52px; }

.hero-baseline,
.eyebrow {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-corail-text);
}

.hero h1 {
  margin: 16px 0 0;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.038em;
  max-width: 17ch;
}
.page-hero h1 {
  margin: 14px 0 0;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 20ch;
}

.hero-subtitle {
  margin: 18px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-ink);
}

.hero-text,
.page-hero-text {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.66;
  color: var(--c-muted);
}
.page-hero-text { margin-top: 16px; }

.hero .btn { margin-top: 28px; }

.hero-reassurance {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--c-muted);
}

/* ==========================================================================
   Chiffres clés — trois tuiles, dont une ambre et une sombre
   ========================================================================== */
/* --------------------------------------------------------------------------
   Bandeau photographique de page
   Même géométrie que la carte de hero : même largeur, même rayon, même ombre
   portée. Le bandeau se lit ainsi comme la suite de la carte, et non comme
   une image posée par-dessus la page.
   -------------------------------------------------------------------------- */
.page-visuel {
  width: min(100% - 44px, calc(var(--container) + 48px));
  margin: 14px auto 0;
  border: 1px solid #E4DCD2;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 44px -30px rgba(74, 44, 30, .34);
  overflow: hidden;
  line-height: 0;
}
.page-visuel img,
.page-visuel svg { display: block; width: 100%; height: auto; }
/* Posé à l'intérieur d'une section, le bandeau épouse la colonne de texte
   au lieu de la largeur de la carte de titre. */
.container > .page-visuel {
  width: 100%;
  margin: 0 0 24px;
}


.stats { padding: 26px 0 var(--sp); }
/* Deux sections rembourrées qui se suivent additionnent leurs marges : les
   chiffres clés et le bloc d'orientation laissaient 132 px de vide, soit le
   double de l'écart pratiqué partout ailleurs. La seconde annule la sienne,
   comme le font déjà les sections des pages Services. */
.stats + .section-pad { padding-top: 0; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.stat {
  padding: 24px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}
.stat:nth-child(3) { background: var(--c-ink); border-color: var(--c-ink); }
/* La tuile en encre porte l'argument le plus distinctif : « ZÉRO REVENTE ».
   Voir la règle de couleur plus bas — l'encre, c'est ce sur quoi on s'engage. */


.stat-num {
  display: block;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.stat-label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.48;
  color: var(--c-muted);
}


.stats-note {
  margin: 22px 0 0;
  max-width: 84ch;
  font-size: 15px;
  color: var(--c-muted);
}

/* ==========================================================================
   Titres de section
   ========================================================================== */
.section-head { margin-bottom: 26px; }
.section-head h2 {
  margin: 12px 0 0;
  font-size: clamp(24px, 3vw, 36px);
  max-width: 24ch;
}
.section-head p {
  margin: 12px 0 0;
  max-width: 64ch;
  font-size: 15.5px;
  color: var(--c-muted);
}

/* ==========================================================================
   Cartes
   ========================================================================== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
/* Trois cartes dans une grille à deux colonnes : la dernière occupe toute
   la largeur plutôt que de laisser un trou. Sa place dans le fichier compte —
   à spécificité égale, c'est l'ordre qui tranche, donc cette règle doit rester
   après celle qu'elle complète. */
.cards-grid-3 .card:last-child { grid-column: span 2; }

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}
.card h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.card-lead { margin: 0; font-size: 14px; line-height: 1.58; color: var(--c-muted); }

/* Liste des technologies (page Services) — détachée du reste de la carte */
.card-tech {
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--c-muted);
}

/* Cartes cliquables (page d'accueil) */
.card-link { text-decoration: none; color: inherit; transition: transform .2s, border-color .2s; }
.card-link:hover { transform: translateY(-3px); border-color: #D6CFC6; }
.card-more {
  margin-top: auto;
  padding-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-corail-text);
}
.card-more::after { content: " →"; }

/* --- La grille bento : uniquement sur la page d'accueil ------------------
   Les quatre services n'ont pas la même taille. Les deux tuiles larges
   portent les prestations principales, les deux courtes sont colorées.
   Sur la page Services, les cartes contiennent bien plus de texte :
   elles gardent une grille régulière à deux colonnes. */
body.home .cards-grid { grid-template-columns: repeat(6, 1fr); }
body.home .cards-grid .card:nth-child(1) { grid-column: span 4; }
/* ── Règle de couleur du site ───────────────────────────────────────────
   La couleur dit quelque chose du contenu, elle ne décore pas.

   CORAIL  : ce qui doit alerter ou déclencher une action.
             La question du risque (« Et si je perdais tout demain ? »),
             les boutons, le badge à retenir, les coches de la liste.
   ENCRE   : ce sur quoi vous vous engagez.
             0 revente, vos garanties, pourquoi travailler avec moi,
             les trois questions de la sauvegarde, le bandeau de contact.
   BLANC   : l'information. Tout le reste.

   Un seul bloc corail par page au maximum : au-delà, il cesse d'alerter.
   ──────────────────────────────────────────────────────────────────── */
body.home .cards-grid .card:nth-child(2) {
  grid-column: span 2;
  background: var(--c-corail);
  border-color: var(--c-corail-hover);
  color: var(--c-surface);
}
/* Sur le corail, seul le blanc pur tient le contraste (4,9:1). Un rose
   pâle, plus élégant sur le papier, tomberait à 3,8:1 : sous le seuil.
   La hiérarchie se fait donc par la graisse, pas par la couleur. */
body.home .cards-grid .card:nth-child(2) .card-lead,
body.home .cards-grid .card:nth-child(2) .card-more { color: var(--c-surface); }

body.home .cards-grid .card:nth-child(3) { grid-column: span 2; }
body.home .cards-grid .card:nth-child(4) { grid-column: span 4; }
/* La cinquième barre toute la largeur. Les quatre premières répondent à des
   questions qu'on pose volontiers ; celle-ci répond à celle qu'on garde pour
   soi — « et s'il n'est pas là ? ». Elle mérite de ne rien avoir à côté. */
body.home .cards-grid .card:nth-child(5) { grid-column: span 6; }

/* ==========================================================================
   Page Services — encadré « Coordination incluse »
   ========================================================================== */
.highlight-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 20px;
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}
/* Le paragraphe garde une largeur utilisable : sans ce flex-basis, il se
   retrouvait écrasé à côté du badge sur les petits écrans. */
.highlight-box p { flex: 1 1 320px; font-size: 15px; color: var(--c-ink); }
/* Variante de la page « Besoin d'aide ? » : pas de pastille, mais un bouton.
   Il se cale sur le milieu du paragraphe au lieu de sa première ligne — d'où
   ce modifieur, .highlight-box servant ailleurs avec un badge et sans bouton. */
.boite-outil { align-items: center; }
/* Sans cette remise à zéro, la marge basse du paragraphe est comprise dans
   le centrage : le texte remontait de huit pixels au-dessus du bouton. */
.boite-outil p { margin: 0; }
/* Ce que garantit la prise en main, sous les trois étapes. Un filet à gauche
   plutôt qu'un encadré : c'est une précision rassurante, pas un avertissement
   — le corail est réservé à ce qui alerte. */
.note-rassurance {
  margin: var(--gap) 0 0;
  padding: 14px 0 14px 18px;
  border-left: 3px solid var(--c-border);
  max-width: 84ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-muted);
}
/* Confirmation d'envoi, au milieu de l'écran.
   L'élément <dialog> se centre lui-même et grise l'arrière-plan : il n'y a ni
   position absolue ni calcul de marge à écrire. */
.fenetre-envoi {
  width: min(92vw, 440px);
  padding: 34px 34px 30px;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: var(--c-ink);
  text-align: center;
  box-shadow: 0 40px 80px -30px rgba(23, 20, 23, .5);
}
.fenetre-envoi::backdrop {
  background: rgba(23, 20, 23, .55);
  backdrop-filter: blur(2px);
}
.fenetre-envoi-marque { color: var(--c-corail); }
.fenetre-envoi h2 {
  margin: 14px 0 8px;
  font-size: 22px;
  letter-spacing: -.02em;
}
.fenetre-envoi p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-muted);
}
.fenetre-envoi .btn { width: 100%; }
.tag {
  flex: none;
  padding: 7px 13px;
  border-radius: 5px;
  background: var(--c-ink);
  color: var(--c-sur-sombre);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   Page Sauvegarde & sécurité
   ========================================================================== */
.backup-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 20px;
  align-items: start;
}
.backup-grid > div:first-child {
  padding: 28px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}
.backup-grid p { font-size: 15px; color: var(--c-muted); }
/* Les intertitres de la colonne de gauche portaient leur couleur et leur
   marge en style en ligne, sans marge basse. Comme les paragraphes n'ont
   pas de marge haute, le texte se collait au titre. */
.backup-grid > div:first-child h3 {
  margin: 30px 0 12px;
  font-size: 17px;
  color: var(--c-ink);
}

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.badge {
  padding: 7px 13px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  background: var(--c-ground);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-muted);
}
.badge-accent {
  background: var(--c-corail);
  border-color: var(--c-corail-hover);
  color: var(--c-surface);
}

.backup-list { margin: 14px 0 0; padding: 0; list-style: none; }
.backup-list li {
  position: relative;
  padding: 10px 0 10px 34px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink);
}
/* La coche est centrée verticalement sur l'item, y compris quand le
   texte passe sur deux lignes. */
.backup-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--c-corail);
  color: var(--c-surface);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* ==========================================================================
   Blocs en encre — règles communes
   ==========================================================================
   Quatre blocs sont posés sur l'encre : le cadre noir des pages Services, les
   garanties de la page Méthode, les exclusions de la page Assistance et la
   troisième tuile de l'accueil. Ils disent tous la même chose visuellement,
   donc leurs couleurs sont décidées ici, une seule fois.

   Le corail clair est la seule nuance de corail lisible sur l'encre ; le
   corail de remplissage y descend sous le seuil de contraste. */
.contrast-box,
.guarantees,
.perimetre-bloc-sombre,
.stat:nth-child(3) {
  color: var(--c-on-dark);
}

.contrast-box h3,
.guarantees h2,
.guarantees h3,
.perimetre-bloc-sombre h3,
.stat:nth-child(3) .stat-num {
  color: var(--c-corail-clair);
}

.contrast-box p,
.contrast-box li,
.guarantees-list span,
.perimetre-bloc-sombre .exclus-list li,
.perimetre-bloc-sombre .perimetre-note,
.stat:nth-child(3) .stat-label {
  color: var(--c-on-dark);
}

/* Les mots en relief passent au blanc plein : sur fond sombre, le gras seul
   ne suffit pas à détacher une amorce de phrase. */
.contrast-box strong,
.guarantees-list strong,
.perimetre-bloc-sombre .exclus-list strong {
  color: var(--c-sur-sombre);
}

/* Filet de séparation : du blanc translucide plutôt qu'un gris fixe, pour
   qu'il reste au même écart du fond quel que soit le bloc. */
.perimetre-bloc-sombre .perimetre-note { border-top-color: rgba(255, 255, 255, .16); }

/* Les liens posés dans un bloc en encre.
   La règle « a { color: var(--c-corail-text) } » du début de fichier
   l'emporte sur la couleur héritée du bloc : un lien y tombait à 2,8:1,
   sous le seuil de 4,5:1. Le corail clair est la seule nuance qui tienne
   sur l'encre (8,0:1), comme pour les intertitres de ces mêmes blocs.

   Le soulignement est conservé : sur fond sombre, la couleur seule ne
   suffit pas à désigner un lien. */
.contrast-box a,
.guarantees a,
.perimetre-bloc-sombre a,
.cta-band a,
.why a,
.stat:nth-child(3) a {
  color: var(--c-corail-clair);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contrast-box a:hover,
.guarantees a:hover,
.perimetre-bloc-sombre a:hover,
.cta-band a:hover,
.why a:hover,
.stat:nth-child(3) a:hover { color: var(--c-sur-sombre); }

.contrast-box {
  padding: 28px;
  border-radius: var(--radius-md);
  background: var(--c-ink);
  color: var(--c-sur-sombre);
}
.contrast-box h3 { font-size: 19px; margin-bottom: 14px; }
.contrast-box p { font-size: 14.5px; }
.contrast-box p + p { margin-top: 14px; }
/* Les intitulés en gras portent la lecture : ils passent en blanc plein
   pour se détacher du texte courant, plus gris. */
.contrast-box strong { color: var(--c-sur-sombre); }

/* ==========================================================================
   Page Assistance — crédit d'heures
   ========================================================================== */
/* L'engagement sur la non-péremption : c'est une promesse, donc l'encre. */
/* Bloc clair : l'encre est réservée aux mises en garde, et ce bloc annonce
   une bonne nouvelle. Voir .perimetre-bloc-sombre pour l'inverse. */
.engagement {
  width: min(100% - 44px, calc(var(--container) + 48px));
  margin: 0 auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: var(--c-ink);
}
.engagement.section-pad { padding: 46px 42px; }
.engagement .container { max-width: none; padding: 0; }
.engagement h2 {
  color: var(--c-ink);
  font-size: clamp(24px, 3vw, 34px);
  max-width: 20ch;
  margin-bottom: 16px;
}
.engagement p { font-size: 15.5px; color: var(--c-muted); max-width: 68ch; }
.engagement p + p { margin-top: 12px; }

.perimetre-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px;
  align-items: start;
}
.perimetre-bloc {
  padding: 28px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}
.perimetre-bloc h3 { font-size: 17px; margin-bottom: 6px; }

/* Liste des exclusions : ni croix ni tiret. Une croix dramatiserait des
   limites parfaitement normales, et un marqueur ferait double emploi avec
   l'amorce en gras qui ouvre chaque item. */
.exclus-list { margin: 14px 0 0; padding: 0; list-style: none; }
.exclus-list li {
  padding: 12px 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--c-muted);
}
.exclus-list strong { color: var(--c-ink); font-weight: 700; }
.perimetre-bloc-sombre {
  border-color: var(--c-ink);
  background: var(--c-ink);
}

.perimetre-note {
  border-top-color: rgba(255, 255, 255, .16);
  color: var(--c-on-dark);
}

.perimetre-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
  font-size: 14px;
  color: var(--c-muted);
}

/* ==========================================================================
   Page Méthode
   ========================================================================== */
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-bottom: 20px;
}
/* Variante à trois colonnes (page Assistance). Sa place dans le fichier
   compte : à spécificité égale, c'est l'ordre qui tranche. Elle doit donc
   suivre .method-grid ci-dessus, tout en restant AVANT le bloc
   « Adaptation aux écrans », pour que le repli mobile l'emporte à son tour. */
.method-grid-3 { grid-template-columns: repeat(3, 1fr); }
.step {
  padding: 24px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}
/* Ici la numérotation dit quelque chose de vrai : c'est un ordre
   chronologique, pas une décoration. */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 6px;
  background: var(--c-aplat);
  color: var(--c-corail-text);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 16.5px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--c-muted); }

.guarantees {
  padding: 30px;
  border: 1px solid var(--c-ink);
  border-radius: var(--radius-lg);
  background: var(--c-ink);
}
.guarantees h2,
.guarantees h3 { font-size: 20px; margin-bottom: 18px; }
/* Quatre garanties depuis le 1er octobre 2026 : la grille fixe à trois
   colonnes laissait la quatrième seule sur une seconde rangée. auto-fit
   répartit ce qu'il y a, et suivra si une cinquième s'ajoute un jour —
   quatre colonnes au large, deux sur une tablette, une sur un téléphone,
   sans qu'aucun seuil ne soit à écrire. */
.guarantees-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guarantees-list strong { display: block; font-size: 15px; }
.guarantees-list span { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.55; }

/* ==========================================================================
   Page Qui je suis
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 28px;
  align-items: start;
}
.about-photo img {
  display: block;
  width: 100%;
  /* 4/5 colle à la proportion réelle du fichier (896 × 1096) : le cadrage
     ne rogne quasiment rien sur les côtés. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
}
.about-text {
  padding: 30px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}
.about-text p { font-size: 15.5px; color: var(--c-muted); }
.about-text p:first-child { font-size: 17px; color: var(--c-ink); font-weight: 500; }

/* Bloc « Pourquoi travailler avec moi » — une grande tuile sombre */
.why {
  /* Le corail de remplissage est trop sombre sur fond noir : on
     redéfinit la variable dans ce périmètre, ce qui corrige aussi
     le style inline présent dans page-qui-je-suis.php. */
  --c-corail: var(--c-corail-clair);
  width: min(100% - 44px, calc(var(--container) + 48px));
  margin: 0 auto 26px;
  border-radius: var(--radius-lg);
  background: var(--c-ink);
  color: var(--c-sur-sombre);
}

/* Garde-fou : deux tuiles pleine largeur qui se suivent ne doivent jamais
   se toucher, sinon leurs angles arrondis se découpent l'un dans l'autre
   et l'ensemble ressemble à un seul bloc cassé. Le cas se produit sur
   « Qui je suis », où le bloc sombre est suivi du bandeau de contact.
   Les marges verticales de frères adjacents fusionnent : l'espace reste
   de 26 px même si les deux règles s'appliquent. */
.why + .cta-band,
.cta-band + .why { margin-top: 26px; }
.why.section-pad { padding: 46px 42px; }
.why .container { max-width: none; padding: 0; }
.why .eyebrow { color: var(--c-corail); }
.why h2 { color: var(--c-sur-sombre); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 30px;
}
/* Direct / Transparent / Libre ne sont pas des étapes : les numéroter
   laissait croire à un ordre qui n'existe pas. Les titres suffisent. */
.why-icon { display: none; }
.why-grid h3 { font-size: 17px; margin-bottom: 8px; }
.why-grid p { font-size: 14px; color: var(--c-on-dark); }

/* ==========================================================================
   Appel à l'action et page Contact
   ========================================================================== */
.cta-band {
  width: min(100% - 44px, calc(var(--container) + 48px));
  margin: 0 auto var(--sp);
  border-radius: var(--radius-lg);
  background: var(--c-ink);
  color: var(--c-sur-sombre);
}
.cta-band.section-pad { padding: 42px; }
.cta-band .container {
  max-width: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 44px;
  row-gap: 10px;
  align-items: center;
}
.cta-band h2 { grid-column: 1; grid-row: 1; font-size: clamp(22px, 2.6vw, 30px); max-width: 20ch; }
.cta-band p  { grid-column: 1; grid-row: 2; margin: 0; max-width: 62ch; font-size: 14.5px; color: var(--c-on-dark); }
.cta-band .btn { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 24px;
  align-items: start;
}
.contact-intro p { font-size: 16px; color: var(--c-muted); }
.contact-keywords {
  margin-top: 18px !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-corail-text);
}
.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  margin-right: 10px;
  padding: 12px 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}
.contact-email:hover { border-color: var(--c-marque); color: var(--c-corail-text); }

.contact-form {
  padding: 28px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}
.form-row { margin-bottom: 16px; }
.form-row label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink);
}
.form-optionnel { font-weight: 500; color: var(--c-muted); }
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
}
.form-row textarea { min-height: 148px; resize: vertical; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--c-marque);
  background: var(--c-surface);
  box-shadow: 0 0 0 3px rgba(213, 49, 60, 0.14);
}

/* --------------------------------------------------------------------------
   Questions facultatives du formulaire de contact
   --------------------------------------------------------------------------
   Un <details> plutôt qu'un panneau piloté en JavaScript : il s'ouvre sans
   script, se replie tout seul si le script casse, et le navigateur annonce
   correctement son état aux lecteurs d'écran. Le formulaire reste unique —
   celui qui veut aller vite ignore le bloc et envoie.
   -------------------------------------------------------------------------- */
.form-plus {
  margin: 4px 0 18px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}
.form-plus > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-corail-text);
  list-style: none;
}
.form-plus > summary::-webkit-details-marker { display: none; }
.form-plus > summary::before {
  content: "+";
  display: inline-block;
  width: 18px;
  font-weight: 800;
}
.form-plus[open] > summary::before { content: "–"; }
.form-plus > summary:focus-visible {
  outline: 2px solid var(--c-marque);
  outline-offset: 3px;
  border-radius: 3px;
}
.form-plus-intro {
  margin: 12px 0 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-muted);
}
/* Deux colonnes tant que la place le permet : huit questions à la file
   donneraient un formulaire décourageant. */
.form-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
/* Les intitulés font une ou deux lignes selon leur longueur, ce qui
   décalait les listes déroulantes d'une colonne à l'autre. On réserve la
   hauteur de deux lignes et on cale le texte en bas : les champs
   s'alignent, quelle que soit la longueur de la question. */
.form-duo .form-row label {
  display: flex;
  align-items: flex-end;
  min-height: 42px;
}

/* Les cases à cocher : un fieldset, parce que ces sept cases forment une
   seule question et doivent être annoncées comme telle. */
.form-cases { margin: 0 0 16px; padding: 0; border: 0; }
.form-cases legend {
  padding: 0;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink);
}
.form-cases label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-ink);
  cursor: pointer;
}
/* Le champ libre de l'option « Autre ».
   Il est visible par défaut et masqué seulement là où :has() existe : si le
   navigateur ne comprend pas le sélecteur, le visiteur voit un champ
   facultatif de plus — jamais un champ qu'il ne peut pas atteindre. Aucune
   ligne de JavaScript n'est nécessaire. */
.form-precision { margin: 4px 0 2px 27px; }
.form-precision label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-muted);
}
.form-precision input {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: inherit;
  font-size: 14.5px;
}
.form-precision input:focus {
  outline: none;
  border-color: var(--c-marque);
  background: var(--c-surface);
  box-shadow: 0 0 0 3px rgba(213, 49, 60, 0.14);
}
@supports selector(:has(*)) {
  .form-cases:not(:has(.case-precision:checked)) .form-precision { display: none; }
}

.form-cases input[type="checkbox"] {
  width: auto;
  flex: none;
  margin-top: 2px;
  accent-color: var(--c-marque);
}

/* Piège à robots : invisible à l'écran, mais pas masqué par display:none,
   que certains automates savent détecter. */
.form-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.form-note.success { background: #E4F5EE; color: #0B6B4F; }
.form-note.error   { background: #FBE9E8; color: var(--c-corail-text); }
/* La mention sous le bouton d'envoi : à lire avant de cliquer, pas à
   remarquer. Ni fond ni cadre — elle appartient au formulaire, elle n'a pas
   à lui disputer l'attention. */
.form-mentions {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-muted);
  text-align: center;
}
.form-mentions a { color: var(--c-corail-text); }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--c-border);
  padding: 30px 0;
  font-size: 13.5px;
  color: var(--c-muted);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
}
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--c-muted); text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--c-corail-text); }

/* ==========================================================================
   Pages de texte long (Mentions légales, CGV)
   ========================================================================== */
.page-content {
  max-width: 820px;
  padding-top: 48px;
  padding-bottom: var(--sp);
}
.page-content h1 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 26px; }
.page-content h2 { font-size: 22px; margin: 38px 0 12px; }
.page-content h3 { font-size: 17px; margin: 26px 0 8px; }
.page-content p,
.page-content li { color: var(--c-muted); font-size: 15.5px; }
.page-content ul, .page-content ol { padding-left: 20px; }
.page-content li { margin-bottom: 7px; }
.page-content strong { color: var(--c-ink); }

/* ==========================================================================
   Adaptation aux écrans — le header rétrécit, les grilles se replient
   ========================================================================== */
@media (max-width: 1099px) {
  .backup-grid,
  .contact-grid,
  .about-grid,
  .perimetre-grid { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; gap: 22px; }
  /* Les colonnes ne sont plus forcées à une : auto-fit s'en charge seul et
     garde deux garanties de front tant qu'il y a la place. Seul l'écart
     se resserre. */
  .guarantees-list { gap: 18px; }
}

@media (max-width: 1023px) {
  :root { --header-h: 100px; --logo-h: 80px; --sp: 52px; }

  .nav-toggle { display: block; }

  /* Le menu devient un panneau déroulant, calé sous le header.
     Positionné en absolu par rapport au header (et non fixé à l'écran) :
     comme le header n'est plus collant, le panneau doit le suivre. */
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 10px 24px 22px;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 18px 34px -22px rgba(23, 20, 23, .35);
  }
  .site-header.is-open .main-nav { display: block; }

  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav li { border-bottom: 1px solid var(--c-border); }
  .main-nav > ul > li:last-child { border-bottom: none; padding-top: 12px; }
  .main-nav a { display: block; padding: 14px 0; font-size: 16px; }
  /* Le sous-menu Services s'indente sous sa rubrique : dans un panneau
     déroulant, un second niveau flottant n'aurait nulle part où aller.
     Il reste replié tant qu'on n'a pas touché le chevron — sans quoi la
     rubrique occuperait la moitié du panneau en permanence. */
  .main-nav .a-sous-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .main-nav .a-sous-menu > a { flex: 1; }
  .main-nav .a-sous-menu > a::after { display: none; }

  .sous-menu-deplieur {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    cursor: pointer;
  }
  .sous-menu-deplieur::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--c-ink);
    transition: transform .2s ease;
  }
  .a-sous-menu.est-ouvert .sous-menu-deplieur::before { transform: rotate(180deg); }

  .main-nav .sous-menu { display: none; flex-basis: 100%; padding: 2px 0 10px 16px; }
  .main-nav .a-sous-menu.est-ouvert > .sous-menu { display: block; }
  .main-nav .sous-menu li { border-bottom: none; }
  /* Dans le panneau déroulant, le pictogramme précède le nom comme sur
     grand écran — même repère, même ordre de lecture. */
  .main-nav .sous-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--c-muted);
  }
  .main-nav .sous-menu-icone { flex: none; color: var(--c-marque); }

  /* Les deux entrées d'action deviennent des blocs pleine largeur. */
  .main-nav .menu-aide { border-bottom: none; }
  .main-nav .menu-aide > a { display: block; margin-top: 10px; padding: 13px 20px; text-align: center; }

  /* « Contact » devient un bouton pleine largeur en bas du panneau. */
  .main-nav > ul > li:last-child > a,
  .nav-cta { display: block; margin-top: 4px; padding: 13px 20px; text-align: center; }
}

@media (max-width: 880px) {
  body.home .cards-grid { grid-template-columns: 1fr; }
  body.home .cards-grid .card:nth-child(n) { grid-column: auto; }
  /* Sans cette ligne, le « span 2 » de la troisième carte recrée une seconde
     colonne et comprime les deux premières sur la largeur d'un téléphone. */
  .cards-grid-3 .card:last-child { grid-column: auto; }
  .cards-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }

  .cta-band .container { grid-template-columns: 1fr; }
  .cta-band h2 { grid-column: 1; grid-row: 1; }
  .cta-band p  { grid-column: 1; grid-row: 2; }
  .cta-band .btn { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 8px; }
}

@media (max-width: 767px) {
  :root { --header-h: 86px; --logo-h: 68px; --sp: 44px; --radius-lg: 12px; }

  .hero,
  .page-hero,
  .page-visuel,
  .why,
  .engagement,
  .cta-band { width: calc(100% - 32px); }

  /* Resserré de 10 px en haut : sur un écran de 667 px, chaque pixel gagné
     avant le bouton compte. Le bouton principal du héros se trouvait
     au ras du pli, puis dessous dès que la barre d'adresse s'affiche. */
  .hero .container,
  .page-hero .container { padding: 30px 24px 34px; }

  /* Même raison : le paragraphe du héros fait six lignes sur téléphone.
     Un point de moins, et l'interligne resserré d'autant, le ramènent à
     la hauteur de cinq sans rien retirer au texte. */
  .hero-text { font-size: 15px; line-height: 1.58; }
  .hero h1 { margin-top: 12px; }
  .hero-subtitle { margin-top: 14px; }
  .hero-actions { margin-top: 22px; }
  .why.section-pad,
  .engagement.section-pad { padding: 30px 24px; }
  .cta-band.section-pad { padding: 30px 24px; }

  .method-grid { grid-template-columns: 1fr; }
  .card, .stat, .perimetre-bloc, .contact-form, .about-text,
  .contrast-box, .backup-grid > div:first-child { padding: 22px; }
  .guarantees { padding: 24px; }
  .footer-grid { flex-direction: column; align-items: flex-start; }
  .form-duo { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Repères d'accessibilité
   ==========================================================================
   Ajoutés le 1er octobre 2026. Le thème n'avait ni lien d'évitement, ni
   classe de masquage visuel : .screen-reader-text venait du CSS de
   l'éditeur de blocs, désormais retiré (voir esit_alleger_wordpress()).
   Le site ne dépend donc plus d'une feuille qu'il n'utilise pas. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--c-ink);
  color: var(--c-sur-sombre);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: top .18s;
}
.skip-link:focus { top: 12px; }

/* Masquage visuel seul : l'élément reste lu par les lecteurs d'écran.
   clip-path plutôt que clip, abandonné depuis. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Le téléphone dans l'en-tête
   ==========================================================================
   Le numéro vivait en pied de page seulement. La promesse du site est
   « un interlocuteur unique, que vous appelez directement » : il doit
   être à portée de pouce sur chaque page.

   Contour et non aplat : le corail reste réservé à l'action principale,
   et deux boutons pleins dans le même en-tête se neutraliseraient. */
.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 10px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s, color .18s;
}
.header-tel:hover { border-color: var(--c-marque); color: var(--c-corail-text); }

/* Entre 1024 et 1280 px, le menu est déployé en entier et occupe 729 px :
   logo, rubriques et numéro en clair totalisaient 1014 px pour 961 px
   disponibles, et la page partait en défilement horizontal. Le numéro se
   réduit donc à son combiné — mesuré le 1er octobre 2026, la rangée tombe
   à 908 px. Il reparaît en clair dès qu'il y a la place. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-tel {
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }
  .header-tel-numero { display: none; }
}

@media (max-width: 1023px) {
  /* Le menu devient un panneau déroulant : la place qu'il laisse revient
     au numéro, juste à gauche du bouton. C'est l'action la plus probable
     d'un visiteur en panne, et elle ne demande pas d'ouvrir le menu. */
  .header-tel { margin-left: auto; }
  .nav-toggle { margin-left: 12px; }
}

@media (max-width: 420px) {
  /* Trop étroit pour le numéro en clair : il ne reste que le combiné.
     La cible tactile garde ses 46 px, comme le bouton du menu. */
  .header-tel {
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }
  .header-tel-numero { display: none; }
}

/* Le pied de page : le numéro y est maintenant un lien, qui ne doit pas
   pour autant se détacher du reste de la ligne. */
.site-footer a[href^="tel:"] {
  color: var(--c-muted);
  font-weight: 600;
  text-decoration: none;
}
.site-footer a[href^="tel:"]:hover { color: var(--c-corail-text); }

/* ==========================================================================
   Les deux actions du héros
   ==========================================================================
   Un seul bouton « Contactez-moi » n'annonçait ni ce qu'on obtient ni ce
   que ça engage, et le seul chemin proposé était un formulaire — alors
   qu'une panne se règle au téléphone. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
/* La marge est portée par le conteneur : sans cette remise à zéro, la
   règle .hero .btn l'ajouterait une seconde fois. */
.hero-actions .btn { margin-top: 0; }

.btn-tel {
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
}
.btn-tel:hover {
  background: var(--c-ground);
  border-color: var(--c-ink);
  transform: translateY(-1px);
}

/* text-wrap: pretty équilibre les dernières lignes et évite les orphelins ;
   les navigateurs qui l'ignorent retrouvent le comportement d'avant,
   jamais pire. */
.hero-reassurance,
.hero-subtitle,
.hero-baseline { text-wrap: pretty; }

/* Les noms qui ne doivent jamais se couper. « Île-de-France » porte deux
   traits d'union, et un navigateur y voit deux occasions de passer à la
   ligne : on lisait « d'Île- » puis « de-France ». */
.insecable { white-space: nowrap; }

/* ==========================================================================
   La page courante dans le menu
   ==========================================================================
   Le menu de secours du thème n'émettait aucune classe d'état : sur les
   onze pages, rien n'indiquait où l'on se trouvait, et les règles
   .current_page_item posées plus haut ne s'appliquaient jamais.

   Le soulignement n'est posé ni sur « Contact » (bouton plein) ni sur
   « Besoin d'aide ? » (pastille colorée) : ils ont déjà leur traitement.
   ::before et non ::after : le chevron de Services occupe déjà ::after. */
@media (min-width: 1024px) {
  .main-nav > ul > li.current_page_item:not(:last-child):not(.menu-aide) > a {
    position: relative;
  }
  .main-nav > ul > li.current_page_item:not(:last-child):not(.menu-aide) > a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    background: var(--c-marque);
    border-radius: 2px;
  }
}
/* Dans le panneau déroulant, le filet n'aurait nulle part où se poser :
   c'est la couleur du texte qui marque la rubrique. */
.main-nav .sous-menu .current_page_item > a { color: var(--c-ink); font-weight: 700; }

/* ==========================================================================
   Mouvement réduit
   ==========================================================================
   Ce bloc reste en DERNIER dans le fichier : il annule des transformations
   déclarées plus haut, et à spécificité égale c'est l'ordre qui tranche.
   Toute règle de survol ajoutée après lui lui échapperait. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .card-link:hover,
  .btn-primary:hover,
  .btn-tel:hover { transform: none; }
  /* Sans animation, un header qui s'escamote sauterait brutalement.
     Pour qui demande moins de mouvement, il reste simplement visible. */
  .site-header.is-hidden { transform: none; }
  .skip-link { transition: none; }
}