/* ==========================================================================
   socle.css — ce que le site ajoute à la maquette V10
   Chargé après cmp.css (l'ordre est alphabétique, cmp.css passe en premier).
   ==========================================================================

   Trois choses vivent ici, et rien d'autre :
     1. les polices auto-hébergées, que la V10 chargeait chez Google ;
     2. le lien d'évitement, absent de la maquette ;
     3. le menu mobile SANS JavaScript.

   cmp.css n'est pas modifié : il reste la maquette telle qu'elle a été validée,
   et l'on voit d'un coup d'œil ce que le passage au site a ajouté.
   ========================================================================== */


/* == 1. POLICES AUTO-HÉBERGÉES ==========================================
   La V10 appelait fonts.googleapis.com : chaque visiteur envoyait alors son
   adresse IP à un tiers. Les fichiers sont désormais dans assets/fonts/.
   Variables 400-700, jeu latin. Préchargées par header.php. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/fraunces.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter.woff2) format('woff2');
}


/* == 2. LIEN D'ÉVITEMENT ================================================
   Premier élément focalisable de la page : au clavier, une tabulation puis
   Entrée sautent la navigation et vont droit au contenu. */
.cmp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--terra-700);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.cmp-skip:focus {
  left: 0;
}


/* == 3. MENU MOBILE, SANS UNE LIGNE DE JAVASCRIPT =======================
   Une case à cocher masquée porte l'état ouvert/fermé ; le sélecteur frère
   « ~ » habille la navigation et le voile. Si JavaScript est absent — ou
   échoue — le menu fonctionne quand même. C'est la seule façon d'être sûr
   qu'un visiteur puisse toujours atteindre le numéro de téléphone.

   L'ORDRE DES ÉLÉMENTS DANS header.php EST STRUCTUREL : la case précède
   l'icône, le voile et la navigation. */
.cmp-burger__input { position: absolute; opacity: 0; pointer-events: none; }
.cmp-burger { display: none; }
.cmp-scrim  { display: none; }

@media (max-width: 992px) {

  /* ⚠ LE PIÈGE : .header porte « backdrop-filter: blur(12px) ». Un filtre
     d'arrière-plan crée un BLOC CONTENEUR pour ses descendants positionnés en
     « fixed » : le panneau et le voile, censés couvrir la fenêtre, se
     retrouvaient enfermés dans la hauteur de la barre — un rectangle crème de
     70 px de haut à côté du logo. Constaté en capture, pas déduit.
     Le flou n'apporte rien sur mobile, où la barre est déjà opaque à 95 %. */
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; }

  .cmp-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;              /* 44 px : cible tactile confortable */
    height: 44px;
    padding: 10px;
    margin-left: auto;
    cursor: pointer;
    order: 3;
  }
  .cmp-burger i {
    display: block;
    height: 2px;
    background: var(--stone-800);
    border-radius: 2px;
    transition: transform 0.3s var(--ease), opacity 0.2s;
  }
  .cmp-burger__input:focus-visible ~ .cmp-burger {
    outline: 2px solid var(--terra-700);
    outline-offset: 2px;
  }

  /* Croix à l'ouverture */
  .cmp-burger__input:checked ~ .cmp-burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .cmp-burger__input:checked ~ .cmp-burger i:nth-child(2) { opacity: 0; }
  .cmp-burger__input:checked ~ .cmp-burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Le panneau : caché par défaut, y compris au clavier (visibility) */
  .cmp-nav {
    display: flex !important;   /* cmp.css le passe en display:none sous 992px */
    position: fixed;
    inset: 0 0 0 auto;
    width: min(84vw, 340px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.5rem 1.5rem 2rem;
    background: var(--cream, #FAF7F2);
    box-shadow: -20px 0 60px rgba(28, 25, 23, 0.18);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.35s var(--ease), visibility 0.35s;
    z-index: 120;
    overflow-y: auto;
  }
  .cmp-burger__input:checked ~ .cmp-nav {
    transform: translateX(0);
    visibility: visible;
  }

  .cmp-nav .cmp-nav__link {
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid var(--stone-200);
    font-size: 1.05rem;
  }
  .cmp-nav .cmp-nav__link.active { color: var(--terra-700); font-weight: 600; }

  /* Voile : un label plein cadre, donc refermable d'un clic à côté */
  .cmp-burger__input:checked ~ .cmp-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, 0.45);
    z-index: 110;
  }

  /* Le bouton de devis reste visible ; le numéro passe dans le panneau */
  .header__tel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-nav, .cmp-burger i { transition: none; }
}


/* == 4. EN-TÊTE : CE QUE LA MAQUETTE NE PRÉVOYAIT PAS ===================
   La V10 n'avait ni numéro de téléphone dans la barre, ni nom de marque long
   à côté d'une navigation à six entrées. Sans ces règles, « Couverture
   Midi-Pyrénées » se casse sur trois lignes et passe SOUS le premier lien. */
.brand__name,
.brand__tag { white-space: nowrap; }
.brand       { flex: 0 0 auto; }

/* Le numéro dans la barre : c'est le geste le plus fréquent d'un visiteur qui
   a une fuite. Il doit être lisible d'un coup d'œil et ne jamais se couper. */
.header__tel {
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--terra-700);
  letter-spacing: 0.01em;
}
.header__tel:hover { color: var(--terra-800); text-decoration: underline; }

/* Sous 1200 px, la barre est à l'étroit : le numéro cède la place, il reste
   accessible dans le hero et dans le pied de page. */
@media (max-width: 1200px) {
  .header__tel { display: none; }
}

/* == 5. LE PANNEAU MOBILE ==============================================
   Dans le panneau, le menu déroulant n'a plus de sens : on n'y survole rien.
   Les cinq services s'affichent donc dépliés, en clair, et le numéro revient. */
@media (max-width: 992px) {

  .cmp-nav__dropdown { position: static; width: 100%; }

  .cmp-nav__dropdown-toggle {
    display: block;
    padding: 0.9rem 0.25rem 0.4rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--stone-500);
    cursor: default;
  }
  .cmp-nav__dropdown-toggle svg { display: none; }
  .cmp-nav__dropdown-toggle:hover { background: none; color: var(--stone-500); }

  .cmp-nav__dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0;
  }
  .cmp-nav__dropdown-link {
    padding: 0.75rem 0 0.75rem 0.9rem;
    border-bottom: 1px solid var(--stone-200);
  }

  /* Le numéro, en bas du panneau, en pleine largeur */
  .cmp-nav::after {
    content: "";
    display: block;
    flex: 1 1 auto;
    min-height: 1.5rem;
  }
}


/* == 6. LE CONTENU EST VISIBLE SANS JAVASCRIPT =========================
   ⚠ DÉFAUT CORRIGÉ, constaté en capture pleine page le 09/09/2026.

   La maquette pose « .fade-up { opacity: 0 } » sans condition, et compte sur un
   script pour ajouter la classe « visible » au défilement. Sans JavaScript — ou
   si le script échoue, ou si un bloqueur l'empêche — 42 sections du site
   restaient BLANCHES. Un visiteur qui a une fuite de toiture voyait une page
   vide.

   Le socle pose déjà « html.js » avant les feuilles de style (header.php).
   L'animation n'est donc demandée QUE si JavaScript répond présent ; sinon,
   tout s'affiche, simplement sans transition. C'est la règle du site : il doit
   fonctionner sans JavaScript. */
.fade-up { opacity: 1; transform: none; }
html.js .fade-up { opacity: 0; transform: translateY(24px); }
html.js .fade-up.visible { opacity: 1; transform: translateY(0); }

/* Mouvement réduit demandé par le système : on n'anime rien, on montre tout. */
@media (prefers-reduced-motion: reduce) {
  html.js .fade-up { opacity: 1; transform: none; transition: none; }
}


/* == 7. L'EN-TÊTE TIENT DANS UN TÉLÉPHONE ==============================
   Mesuré au navigateur en 390 px : la barre réclamait 510 px. La marque
   (278 px, insécable) et le bouton de devis (127 px) occupaient toute la
   largeur, et l'icône du menu se retrouvait à 490 px — hors de l'écran.
   Le menu était donc inatteignable sur téléphone, et les dix pages
   défilaient latéralement.

   Trois leviers, du plus doux au plus radical, pour que l'icône du menu
   reste toujours dans le cadre. */

@media (max-width: 992px) {
  .header__inner { gap: 0.75rem; }

  /* La marque cède la première : le nom peut se replier sur deux lignes,
     le logo et la baseline gardent leur place. */
  .brand      { flex: 0 1 auto; min-width: 0; }
  .brand__name { white-space: normal; font-size: 0.95rem; }
  .brand__tag  { white-space: normal; }

  /* Le bouton de devis se resserre plutôt que de pousser le menu dehors. */
  .header__actions { flex: 0 0 auto; }
  .header__actions .cmp-btn { padding-inline: 0.85rem; font-size: 0.8rem; white-space: nowrap; }

  .cmp-burger { flex: 0 0 44px; margin-left: 0; }
}

/* Sous 640 px, la baseline et le bouton de devis sortent de la barre : le
   devis est à un doigt dans la barre d'appel du bas et dans le panneau. */
@media (max-width: 640px) {
  .brand__tag      { display: none; }
  .brand__logo     { width: 42px; height: 42px; }
  .brand__name     { font-size: 0.9rem; line-height: 1.15; }
  .header__actions { display: none; }
}

/* Ceinture et bretelles : plus rien ne fait défiler la page latéralement.
   Le panneau du menu est en « fixed » hors cadre à droite ; sans cette
   règle il rallonge la zone défilable de la page.

   ⚠ « clip » ET NON « hidden ». Les deux masquent le débordement, mais
   « hidden » fabrique au passage une zone de défilement — et une barre
   « position: sticky » ne colle qu'au plus proche ancêtre défilant. L'en-tête
   du site est déclaré sticky : avec « hidden », il partait tout de même hors
   de l'écran. Mesuré le 09/09/2026 sur l'accueil en 1440 px : après 3 000 px
   de défilement, le haut de l'en-tête se trouvait à −2 491 px. Le numéro de
   téléphone et le bouton de devis disparaissaient donc dès le premier écran
   passé, sur les treize pages, en desktop.

   « clip » ne crée pas de zone de défilement : le sticky retrouve son
   ancêtre et fonctionne. La déclaration « hidden » est conservée juste
   au-dessus comme repli pour les navigateurs qui ignorent « clip » — ils
   retombent alors sur le comportement d'avant, jamais sur une page cassée. */
html, body { overflow-x: hidden; }
html, body { overflow-x: clip; }


/* == 8. BARRE D'ACTION MOBILE ==========================================
   Deux gestes, toujours à portée de pouce : appeler et demander un devis.
   Elle n'apparaît que sous 640 px, là où le bouton de devis quitte la barre
   du haut. Le pied de page reçoit une réserve de hauteur pour ne pas passer
   dessous. */
.cmp-barre-mobile { display: none; }

@media (max-width: 640px) {
  .cmp-barre-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 130;
    background: var(--stone-200);
    box-shadow: 0 -6px 24px rgba(28, 25, 23, 0.16);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .cmp-barre-mobile a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 56px;          /* cible tactile confortable */
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    letter-spacing: 0.01em;
  }
  .cmp-barre-mobile__tel   { background: var(--white, #fff); color: var(--terra-700); }
  .cmp-barre-mobile__devis { background: var(--terra-700); color: #fff; }
  .cmp-barre-mobile svg    { width: 18px; height: 18px; fill: currentColor; }

  /* La barre est posée sur la page : on rend sa hauteur au bas du document. */
  body { padding-bottom: 56px; }

  /* Ouvert, le panneau du menu passe devant la barre. */
  .cmp-burger__input:checked ~ .cmp-scrim { z-index: 135; }
  .cmp-nav { z-index: 140; }
}


/* == 9. TÉMOIGNAGES SANS NOM, PREUVE GOOGLE RÉELLE =====================
   Le brief du 16/06/2026 fournit trois témoignages et précise :
   « PAS des avis Google nominatifs ; rester générique ». Les cartes n'ont
   donc plus d'en-tête à initiales : l'attribution passe sous la citation.
   Là où le brief ne fournit rien, la section montre la note Google réelle
   plutôt qu'un témoignage. */
.avis-card__role--seul {
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--stone-500);
  letter-spacing: 0.02em;
}
.avis-card__role--seul::before { content: "— "; }

.cmp-preuve {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 560px;
  margin-inline: auto;
  padding: 1.75rem 2rem;
  background: var(--white, #fff);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(28, 25, 23, 0.06);
}
.cmp-preuve__note    { display: flex; align-items: baseline; color: var(--terra-700); }
.cmp-preuve__chiffre { font-family: var(--font-display); font-size: 3rem; font-weight: 600; line-height: 1; }
.cmp-preuve__sur     { font-size: 1.1rem; font-weight: 600; opacity: 0.7; }
.cmp-preuve__etoiles { display: flex; gap: 2px; margin-bottom: 0.4rem; }
.cmp-preuve__etoiles .star { width: 18px; height: 18px; fill: #E8A33D; }
.cmp-preuve__texte   { font-size: 0.95rem; color: var(--stone-600); margin: 0; }

@media (max-width: 480px) {
  .cmp-preuve { flex-direction: column; text-align: center; gap: 0.75rem; padding: 1.5rem; }
  .cmp-preuve__etoiles { justify-content: center; }
}


/* == 10. L'IMAGE DU PREMIER ÉCRAN EST UNE VRAIE IMAGE ==================
   Elle était posée en « background-image » dans un attribut de style : le
   scanner du navigateur ne la voit pas, elle n'est demandée qu'une fois les
   feuilles de style analysées, et c'est elle le plus grand élément affiché.
   En balise <img>, elle se précharge, se décline en srcset et porte
   fetchpriority. Le rendu, lui, est identique. */
img.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}


/* == 11. ZONE D'INTERVENTION ==========================================
   Le cadre portait la classe « placeholder » et affichait un rectangle gris.
   Il montre désormais le rayon annoncé au brief. Dessiné dans la page : aucun
   fournisseur de cartes n'est appelé, donc aucune adresse IP de visiteur ne
   part chez un tiers — c'est la même raison qui a fait rapatrier les polices. */
.zone__map { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.zone__rayon { width: min(100%, 320px); height: auto; }
.zone__rayon-30     { fill: rgba(139, 45, 26, 0.05); stroke: var(--terra-700); stroke-width: 1.5; stroke-dasharray: 5 5; }
.zone__rayon-15     { fill: rgba(139, 45, 26, 0.07); stroke: var(--terra-700); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.7; }
.zone__rayon-centre { fill: var(--terra-700); }
.zone__rayon-ville  { text-anchor: middle; font-family: var(--font-display); font-size: 17px; font-weight: 600; fill: var(--stone-900); }
.zone__rayon-cote   { text-anchor: middle; font-size: 11px; font-weight: 600; fill: var(--terra-700); letter-spacing: 0.06em; }
.zone__rayon-legende { text-align: center; font-size: 0.9rem; color: var(--stone-600); margin: 0; }


/* == 12. GALERIE : DES RANGÉES PLEINES ================================
   Huit vignettes dans une grille de trois laissaient une rangée à deux, et un
   vide à droite. En quatre colonnes, les huit forment deux rangées pleines. */
@media (min-width: 993px) {
  #galerie .gallery:not(.gallery--large) { grid-template-columns: repeat(4, 1fr); }
}


/* == 12. LE HERO TIENT DANS CE QUI RESTE DE LA FENÊTRE ==================
   La barre d'action couvre les 56 derniers pixels de la fenêtre. Le
   padding-bottom du body rend cette hauteur en FIN de document, pas au
   hero, qui se dimensionne sur la fenêtre entière (92vh) : dès que son
   contenu tient dans cette hauteur — grand téléphone, mode paysage — son
   dernier élément se retrouve sous la barre. Sur un téléphone de 390×844,
   le contenu déborde largement (1771 px mesurés) et la règle ne change
   rien ; elle sert les cas où il ne déborde pas. */
@media (max-width: 640px) {
  .hero { min-height: calc(92vh - 56px); }
}


/* == 13. SUR MOBILE, LE TÉLÉPHONE PASSE DEVANT LE DEVIS =================
   Dans le hero, « Demander un devis » était le bouton plein, « 06 88 91 57 34 »
   un simple contour plus pâle. Pour un couvreur, c'est l'inverse qu'il faut :
   le visiteur qui a une fuite veut appeler, pas remplir un formulaire — et
   c'est l'appel qui déclenche le chantier. Les deux boutons gardent leur
   place dans le flux (l'ordre de lecture ne change pas), seul leur poids
   visuel est échangé, et seulement là où l'on tient le téléphone en main. */
@media (max-width: 640px) {
  .hero__cta .cmp-btn--primary {
    background: transparent;
    color: var(--cream, #FAF7F2);
    border: 1.5px solid rgba(250, 247, 242, 0.55);
  }
  .hero__cta .cmp-btn--ghost-light,
  .hero__cta a[href^="tel:"] {
    background: var(--terra-700, #8B2D1A);
    color: #fff;
    border-color: var(--terra-700, #8B2D1A);
  }
}


/* == 14. LES DEUX NUMÉROS DANS LE PANNEAU DU MENU =======================
   Sous 992 px, le numéro de l'en-tête disparaît et seul le portable reste
   atteignable, par la barre du bas. Le fixe — celui qui dit « il y a un
   bureau à Toulouse », et que cherche un client méfiant du démarchage —
   n'existait plus qu'au fond du pied de page. Ils sont désormais tous les
   deux dans le panneau, étiquetés, puisque ce n'est pas le même client qui
   compose l'un et l'autre.

   Le bloc n'existe que dans le panneau : au-dessus de 992 px, la barre
   d'en-tête affiche déjà le fixe, et le répéter n'aurait aucun sens. */
.cmp-nav__tels { display: none; }

@media (max-width: 992px) {
  .cmp-nav__tels {
    display: grid;
    gap: 0.5rem;
    margin-top: auto;            /* poussé en bas du panneau */
    padding-top: 1.5rem;
    border-top: 1px solid rgba(28, 25, 23, 0.12);
  }
  .cmp-nav__tels a {
    display: block;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(139, 45, 26, 0.25);
    border-radius: 10px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.6);
  }
  .cmp-nav__tel-quoi {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--stone-500, #78716C);
  }
  .cmp-nav__tel-num {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--terra-700, #8B2D1A);
  }
}


/* == 15. LE PANNEAU DU MENU NE FINIT PAS SOUS LA BARRE D'ACTION =========
   Mesuré le 09/09/2026, menu ouvert sur un écran de 390×844 : le panneau
   descend jusqu'à 844 px, la barre d'action commence à 788. Les 56 derniers
   pixels du panneau — soit le second numéro de téléphone — étaient couverts.

   Le panneau porte pourtant z-index:140 contre 130 pour la barre. Sans
   effet : il est enfermé dans le contexte d'empilement du <header>, et son
   z-index n'est comparable qu'à celui de ses frères, pas à celui de la barre,
   qui est fille du body. Plutôt que d'aller déplacer des z-index de proche en
   proche — ce qui se casse à la première section qui en ajoute un — on rend
   simplement au panneau la hauteur qu'on lui a prise. */
@media (max-width: 640px) {
  .cmp-nav {
    /* La réserve rend au panneau la hauteur que la barre lui prend. */
    padding-top: 4.5rem;
    padding-bottom: calc(1rem + 56px + env(safe-area-inset-bottom));
  }

  /* Mesuré après la réserve : le contenu réclamait 952 px pour 844 de
     fenêtre, et le second numéro n'apparaissait qu'en faisant défiler le
     panneau — un geste que personne ne devine. Les deux numéros passent
     donc côte à côte : le panneau tient d'un coup d'œil. */
  .cmp-nav__tels { grid-template-columns: 1fr 1fr; }
  .cmp-nav__tels a { padding: 0.6rem 0.7rem; }
  .cmp-nav__tel-num { font-size: 0.9375rem; }
}


/* == 16. LA PREUVE DEVIENT VÉRIFIABLE ==================================
   « 4,9 sur 159 avis » était affiché quatorze fois et cliquable zéro fois.
   Les cinq clients simulés du 09/09/2026 ont tous voulu aller lire ces avis
   eux-mêmes ; aucun n'a trouvé comment. Le lien pointe la fiche Google de
   l'entreprise, identifiée depuis la carte intégrée à son site en ligne puis
   ouverte pour contrôle.

   Discret par défaut, souligné au survol : c'est une preuve à portée de clic,
   pas un appel à l'action de plus. */
.cmp-lien-avis {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.cmp-lien-avis:hover,
.cmp-lien-avis:focus-visible {
  color: var(--terra-700, #8B2D1A);
}

/* Le compteur d'avis de la bande de réassurance est enveloppé d'un lien :
   sans cela le chiffre et son libellé se retrouveraient en ligne, côte à côte. */
.trust__grid > div > .cmp-lien-avis { display: block; border-bottom: 0; }
.trust__grid > div > .cmp-lien-avis:hover .trust__num { color: var(--terra-700, #8B2D1A); }


/* == 17. LA PREUVE TIENT DANS LE PREMIER ÉCRAN MOBILE ===================
   Mesuré sur 390×844 : la note « 4,9/5 · 159 avis vérifiés Google »
   s'étendait de 770 à 866 px, alors que la barre d'action commence à 788.
   Les trois quarts de la meilleure preuve du site étaient recouverts par
   notre propre barre, dans le seul écran que tout visiteur voit.

   Le hero empile des marges de 28, 28, 48 et 48 px avant d'y arriver. On les
   resserre sous 640 px — et seulement là : sur un écran large, l'air fait
   partie du dessin et rien ne recouvre rien. Gain mesuré : 88 px, la note
   remonte au-dessus de la barre. */
@media (max-width: 640px) {
  .hero__eyebrow { margin-bottom: 1rem; }      /* 28px -> 16px */
  .hero__title   { margin-bottom: 1rem; }      /* 28px -> 16px */
  .hero__lead    { margin-bottom: 1.25rem; }   /* 48px -> 20px */
  .hero__cta     { margin-bottom: 1rem; }      /* 48px -> 16px */
}


/* == 18. LES TROIS PAGES LÉGALES ========================================
   Créées le 09/09/2026 pour remplacer trois liens morts, elles employaient
   quatre classes qui n'existaient nulle part : .page-hero--court, .cmp-prose,
   .legal-liste et .plan-liste. Le contenu s'affichait donc sans mise en
   forme — la fiche d'identité de l'entreprise se lisait comme une liste de
   mots empilés, libellés et valeurs confondus, sur toute la largeur de
   l'écran. C'est précisément la page qu'un donneur d'ordre professionnel
   ouvre en premier.

   Rien d'inventé ici : on reprend les variables et les polices de la charte. */

/* Un bandeau de haut de page sans photo ni statistiques : deux fois moins
   haut que celui des pages de service, qui, lui, doit porter une image. */
.page-hero--court {
  min-height: 0;
  padding: calc(var(--space-2xl, 6rem) * 0.55) 0 calc(var(--space-2xl, 6rem) * 0.4);
  background: var(--stone-900);
}
.page-hero--court .page-hero__overlay { opacity: 0.5; }

/* Colonne de lecture. 68 caractères : au-delà, l'œil perd la ligne suivante
   en revenant à la marge — le défaut le plus courant des pages de texte. */
.cmp-prose {
  max-width: 68ch;
  color: var(--stone-700);
  font-size: 1rem;
  line-height: 1.75;
}
.cmp-prose h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--stone-900);
  margin: 2.75rem 0 0.85rem;
}
.cmp-prose h2:first-child { margin-top: 0; }
.cmp-prose p { margin: 0 0 1rem; }
.cmp-prose a { color: var(--terra-700); }
.cmp-prose a:hover { text-decoration: underline; }
.cmp-prose em {
  font-style: italic;
  color: var(--terra-700);
}

/* Fiche d'identité : le libellé à gauche, la valeur en face. C'est ce qui
   permet de vérifier un SIRET d'un coup d'œil au lieu de le chercher. */
.legal-liste {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--stone-50);
  border: 1px solid var(--stone-200);
  border-radius: 10px;
}
.legal-liste dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--stone-500);
  text-transform: uppercase;
}
.legal-liste dd {
  margin: 0;
  color: var(--stone-900);
  font-weight: 500;
}
@media (max-width: 640px) {
  /* Deux colonnes de 9rem ne tiennent pas dans 390 px : on empile, en gardant
     le libellé au-dessus de sa valeur. */
  .legal-liste { grid-template-columns: 1fr; gap: 0.15rem; padding: 1rem 1.15rem; }
  .legal-liste dd { margin-bottom: 0.85rem; }
  .legal-liste dd:last-child { margin-bottom: 0; }
}

/* Plan du site : des liens qu'on vise au doigt, pas une liste à puces. */
.plan-liste {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}
.plan-liste li { margin: 0; }
.plan-liste a {
  display: block;
  padding: 0.7rem 0.9rem;
  min-height: 44px;               /* cible tactile */
  border-radius: 8px;
  color: var(--terra-700);
  text-decoration: none;
  border: 1px solid transparent;
}
.plan-liste a:hover,
.plan-liste a:focus-visible {
  background: var(--stone-50);
  border-color: var(--stone-200);
}


/* == 19. ALIGNEMENTS, CONTRASTES ET CLAVIER ============================
   Relevés au pixel le 09/09/2026, puis recontrôlés un par un : trois des
   contrastes signalés par l'analyse étaient calculés sur les couleurs CSS
   déclarées, sans tenir compte du fond réellement rendu — le surtitre du
   hero mesure 5,12:1 et la note Google 11,80:1 sur les pixels affichés, pas
   1,79 et 1,12. Ils ne sont donc pas touchés. Ce qui suit est ce qui a été
   vérifié faux à l'écran. */

/* Le titre des pages de service commençait 250 px à droite du contenu.
   .page-hero__inner porte un max-width de 700 px, et .cmp-container le
   recentre : le bloc se retrouvait au milieu au lieu de commencer à la
   marge. Mesuré sur /couvreur-toulouse/ : titre à x=370, contenu à x=120. */
.page-hero__inner { max-width: 1200px; margin-inline: auto; }
.page-hero__breadcrumb,
.page-hero__title,
.page-hero__lead,
.page-hero__stats,
.page-hero__cta { max-width: 700px; }

/* La ligne du bas du pied de page portait sa mise en page en attribut style :
   elle héritait d'une largeur de 760 px commençant à x=340, quand la grille
   juste au-dessus fait 1104 px à x=168. */
.footer__bottom-ligne {
  /* .footer__bottom est lui-meme en flex : sans width, son enfant se
     dimensionne sur son contenu (760 px a x=340) au lieu de reprendre la
     largeur de la grille au-dessus. */
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Deux textes sous le seuil AA, mesurés sur les pixels : le sous-titre de
   section à 4,49:1 (il manque 0,01) et la ligne du bas du pied de page à
   3,65:1 sur fond sombre. Un ton plus soutenu suffit. */
.section-subtitle { color: var(--stone-600); }
.footer__bottom span { color: var(--stone-300); }

/* Le menu « Services » ne s'ouvrait qu'au SURVOL. Le script pose bien la
   classe .open et aria-expanded="true" à l'activation au clavier, mais
   aucune règle CSS ne l'ouvrait : les cinq pages de service étaient
   inatteignables sans souris. On ajoute la classe et :focus-within, qui
   couvre le cas où le script ne tourne pas. */
.cmp-nav__dropdown.open .cmp-nav__dropdown-menu,
.cmp-nav__dropdown:focus-within .cmp-nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Le déclencheur doit pouvoir recevoir le focus pour que :focus-within joue. */
.cmp-nav__dropdown-toggle { cursor: pointer; }

/* Cibles tactiles : les numéros de téléphone faisaient 23 et 20 px de haut
   au doigt, pour un minimum recommandé de 44. Ce sont les liens les plus
   importants du site. */
.footer__contact-item a,
.contact__info-value a,
.footer__links a,
.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Les liens « Découvrir » des cartes de service flottaient à 24 px les uns
   des autres selon la longueur du texte au-dessus. */
.service-card { display: flex; flex-direction: column; }
.service-card__link { margin-top: auto; }

/* Une ancre visée depuis une autre page passait sous l'en-tête collant. */
[id] { scroll-margin-top: 5rem; }


/* == CORRECTIFS PLATEFORME (12/10/2026) =================================
   Ajoutés à l'import sur mon-ecommerce.fr ; cmp.css reste intact. */

/* Panneau mobile : le sous-menu partait à gauche au survol ou au toucher.
   « .cmp-nav__dropdown:hover .cmp-nav__dropdown-menu » (cmp.css) et la
   règle .open / :focus-within du socle reposent translateX(-50%), prévu pour
   centrer le menu déroulant sur ordinateur, et l'emportent sur le
   « transform: none » du panneau (sélecteurs plus forts). */
@media (max-width: 992px) {
  .cmp-nav .cmp-nav__dropdown:hover .cmp-nav__dropdown-menu,
  .cmp-nav .cmp-nav__dropdown.open .cmp-nav__dropdown-menu,
  .cmp-nav .cmp-nav__dropdown:focus-within .cmp-nav__dropdown-menu {
    transform: none;
  }
}

/* Pied de page : le « display: inline-flex » des cibles tactiles (socle)
   mettait les liens d'une colonne bout à bout sur une même ligne. */
.footer__links { display: flex; flex-direction: column; align-items: flex-start; }

/* Badges : le filtre de la maquette (noir puis inversé) réduisait les tampons
   ronds, pleins, à des disques gris sans texte. On garde leurs couleurs. */
.footer__trust-item img { filter: none; height: 48px; width: 48px; }

/* Réseaux sociaux (repris du site en ligne) : sous la présentation de la marque. */
.footer__reseaux { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 1.25rem; }
.footer__reseaux a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;   /* cinq sur une ligne dans la colonne (244 px) */
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%;
  color: var(--stone-300, #D6D3D1);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.footer__reseaux a:hover,
.footer__reseaux a:focus-visible { color: #fff; background: var(--terra-700, #8B2D1A); border-color: var(--terra-700, #8B2D1A); }
.footer__reseaux svg { width: 18px; height: 18px; fill: currentColor; }

/* Signature de l'agence : discrète, un cran sous les mentions légales. */
.footer__legal a.footer__signature { opacity: 0.6; }
.footer__legal a.footer__signature:hover { opacity: 1; }