/*
Theme Name: PHONECEPTION
Author: PHONECEPTION
Description: Thème bloc sur mesure de PHONECEPTION, atelier de réparation électronique à Montlhéry. Converti en blocs natifs depuis la maquette validée (méthode Claude-To-WordPress).
Version: 1.3.6
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: phoneception
Tags: block-theme, full-site-editing
*/

/* ==========================================================================
   Feuille du thème. Les icônes sont dans assets/icones.css (générées par
   scripts/icones-css.js) ; les corrections propres à l'éditeur dans
   assets/editor.css. Registre visuel : voir BRIEF.md à la racine du projet.
   ========================================================================== */

/* --- 1. Jetons de design ------------------------------------------------ */
:root {
  --encre: #1D1D1F;
  --gris: #6E6E73;
  --gris-sombre: #8C8C92;
  --fond: #F5F5F7;
  --fond-clair: #FBFBFD;
  --blanc: #FFFFFF;
  --trait: #E3E3E8;
  --rouge: #FB0101;            /* mesuré sur le logo : grands éléments seulement (contraste 3,8:1) */
  --rouge-fonce: #C80000;      /* aplat sous texte blanc : survols, page en cours (6,1:1) */

  /* Jetons de rôle : ce que la couleur FAIT, pas ce qu'elle est. En clair, plusieurs rôles
     partagent la même valeur ; le mode sombre (ci-dessous) les sépare. */
  --surface: #FFFFFF;          /* cartes et sections « blanches » */
  --noir: #1D1D1F;             /* blocs noirs : contact, pied de page, encarts */
  --pastille: #1D1D1F;         /* pastilles rondes et numéros de la frise */
  --sur-encre: #FFFFFF;        /* texte posé sur un aplat d'encre (bouton noir, choix coché) */
  --encre-survol: #000000;
  --rouge-texte: #C80000;      /* petit texte rouge (contraste AA 5,6:1) */
  --gris-halo: #56565B;        /* gris du hero, posé sur le halo rosé */
  --champ-actif: #FFFFFF;      /* fond d'un champ de formulaire en cours de saisie */
  --contour: rgb(29 29 31 / .2);
  --contour-fort: rgb(29 29 31 / .35);
  --bord-carte: rgb(0 0 0 / .05);
  --verre: rgb(29 29 31 / .72);   /* noir fumé de l'en-tête et de la barre mobile */
  --ombre-bouton: 0 12px 28px -12px rgb(251 1 1 / .65);
  --ombre-carte: 0 30px 60px -30px rgb(29 29 31 / .3);

  /* Le navigateur dessine ses propres éléments (barres de défilement, cases, listes
     déroulantes, remplissage automatique) dans le thème annoncé ici. */
  color-scheme: light dark;

  --rayon: 24px;
  --largeur: 1280px;
  --gouttiere: clamp(16px, 4vw, 64px);
  --police: "Rajdhani", "Arial Narrow", system-ui, sans-serif;
  --courbe: cubic-bezier(.16, 1, .3, 1);
}

/* --- 1 bis. Mode sombre -------------------------------------------------- */
/* Suit le réglage de l'appareil du visiteur ; le bouton de l'en-tête (app.js) permet d'en changer
   et mémorise le choix dans le navigateur (aucun cookie).
   Seuls les jetons changent, les composants n'en savent rien. Trois profondeurs de noir
   (page < cartes < blocs noirs) remplacent les ombres, invisibles sur fond sombre.
   Contrastes mesurés (WCAG AA, 4,5:1 pour le texte courant) : encre 14 à 19:1,
   gris 7 à 8:1, gris sombre 5,5:1 sur bloc noir, rouge du texte 4,9 à 6,6:1. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --encre: #F5F5F7;
    --gris: #A1A1A6;
    --gris-sombre: #98989D;
    --fond: #000000;
    --fond-clair: #0B0B0C;
    --trait: #38383A;

    --surface: #161617;
    --noir: #232325;
    --pastille: #3A3A3C;
    --sur-encre: #1D1D1F;
    --encre-survol: #FFFFFF;
    --rouge-texte: #FF5449;    /* #C80000 tomberait à 3,3:1 sur le noir */
    --gris-halo: var(--gris);
    --champ-actif: #000000;
    --contour: rgb(255 255 255 / .24);
    --contour-fort: rgb(255 255 255 / .4);
    --bord-carte: rgb(255 255 255 / .07);
    --verre: rgb(44 44 46 / .72);   /* un cran plus clair que la page, sinon la capsule s'y fond */
    --ombre-bouton: none;           /* l'ombre rouge deviendrait un halo lumineux */
    --ombre-carte: 0 30px 60px -30px rgb(0 0 0 / .9);

    /* Les couleurs de la palette de l'éditeur suivent, pour un réglage posé plus tard. */
    --wp--preset--color--encre: var(--encre);
    --wp--preset--color--gris: var(--gris);
    --wp--preset--color--gris-sombre: var(--gris-sombre);
    --wp--preset--color--fond: var(--fond);
    --wp--preset--color--fond-clair: var(--fond-clair);
    color-scheme: dark;
  }
}
/* Choix du visiteur (bouton de l’en-tête, app.js) : il l’emporte sur le réglage de l’appareil. */
:root[data-theme="dark"] {
  --encre: #F5F5F7;
  --gris: #A1A1A6;
  --gris-sombre: #98989D;
  --fond: #000000;
  --fond-clair: #0B0B0C;
  --trait: #38383A;

  --surface: #161617;
  --noir: #232325;
  --pastille: #3A3A3C;
  --sur-encre: #1D1D1F;
  --encre-survol: #FFFFFF;
  --rouge-texte: #FF5449;    /* #C80000 tomberait à 3,3:1 sur le noir */
  --gris-halo: var(--gris);
  --champ-actif: #000000;
  --contour: rgb(255 255 255 / .24);
  --contour-fort: rgb(255 255 255 / .4);
  --bord-carte: rgb(255 255 255 / .07);
  --verre: rgb(44 44 46 / .72);   /* un cran plus clair que la page, sinon la capsule s'y fond */
  --ombre-bouton: none;           /* l'ombre rouge deviendrait un halo lumineux */
  --ombre-carte: 0 30px 60px -30px rgb(0 0 0 / .9);

  /* Les couleurs de la palette de l'éditeur suivent, pour un réglage posé plus tard. */
  --wp--preset--color--encre: var(--encre);
  --wp--preset--color--gris: var(--gris);
  --wp--preset--color--gris-sombre: var(--gris-sombre);
  --wp--preset--color--fond: var(--fond);
  --wp--preset--color--fond-clair: var(--fond-clair);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
/* Les deux seuls composants qui demandent plus qu'un jeu de jetons sont en section 21. */

/* --- 2. Base et neutralisation de Gutenberg ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }   /* height:auto : sinon l'attribut height des blocs image l'emporte */
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* L'espacement automatique est coupé dans theme.json (blockGap: 0px). Filet de sécurité
   à spécificité NULLE : il ne doit jamais écraser les marges des composants. */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image, figure.wp-block-table { margin: 0; }

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

/* Surfaces du navigateur aux couleurs de la marque : sélection, curseur de saisie, cases. */
::selection { background: var(--rouge); color: var(--blanc); }
:root { accent-color: var(--rouge-texte); caret-color: var(--rouge-texte); }

/* Pages construites avec Elementor (éléments atomiques de la version 4). Ses blocs portent
   aussi la classe .e-con de ses anciens conteneurs, qui leur impose largeur, marges, marge
   intérieure et affichage. On les ramène à de simples balises ; les classes du thème, toutes
   plus bas, font le reste. Cette feuille passe après celles d'Elementor (functions.php) : à
   force égale, ces remises à zéro l'emportent, puis les composants l'emportent sur elles.
   Elles doivent donc rester AVANT toute règle de composant, .enveloppe comprise. */
/* min-width / min-height : « auto », la valeur normale d'une <div>. À 0, un bloc de boutons
   placé dans une rangée flex rétrécissait sous la largeur de son bouton. */
.e-atomic-element {
  display: block; width: auto; height: auto; min-width: auto; min-height: auto;
  margin: 0; padding: 0; overflow: visible; border-radius: 0; z-index: auto;
}
/* .e-con::before dessine un calque de fond Elementor : on le neutralise pour qu'un ::before
   du thème (pastille, filet...) se comporte comme sur une page en blocs. */
.e-atomic-element::before {
  display: inline; position: static; inset: auto; width: auto; height: auto;
  border: 0 none; border-radius: 0; opacity: 1; mix-blend-mode: normal; transition: none;
}
/* Elementor retire le soulignement de tous les liens de ses pages. */
.elementor a { text-decoration: revert; }
/* Ses widgets classiques (Éditeur de texte pour les listes, Code court pour les sections
   partagées et les avis) enveloppent leur contenu dans une ou deux <div> : sur le site, elles
   s'effacent de la mise en page, comme si la liste ou la section était posée directement. */
.elementor:not(.elementor-edit-mode) :is(.elementor-widget-text-editor, .elementor-widget-shortcode, .elementor-shortcode) { display: contents; }

.enveloppe { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }

.skip-link.screen-reader-text:focus { z-index: 100; border-radius: 999px; }

/* --- 3. Typographie commune --------------------------------------------- */
.surtitre {
  font-size: 15px; font-weight: 700; line-height: 1.3;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--rouge-texte);
}
.titre-section {
  font-size: clamp(38px, 4.8vw, 66px);
  font-weight: 700; line-height: 1; letter-spacing: -.01em;
  text-wrap: balance; hyphens: none;
}
.titre-geant {
  font-size: clamp(46px, 6.4vw, 92px);
  font-weight: 700; line-height: .95; letter-spacing: -.015em;
  text-wrap: balance; hyphens: none;
}
.chapeau { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--gris); text-wrap: balance; }

.entete-section {
  display: grid; justify-items: center; gap: 18px;
  max-width: 860px; margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}
/* Filet rouge sous le titre de la section avis (référence A). */
.entete-section.avec-filet::after { content: ""; width: 72px; height: 4px; border-radius: 2px; background: var(--rouge); }

/* --- 4. Boutons --------------------------------------------------------- */
/* La classe d'un bouton se pose sur le conteneur .wp-block-button : on stylise le lien
   qu'il contient, avec une spécificité supérieure à celle du bloc (0,2,0). Sélecteur de
   descendant et non d'enfant : dans l'éditeur Elementor, une <div> s'intercale entre les deux. */
.wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: auto; min-height: 54px; padding: 0 28px;
  border: 1.5px solid transparent; border-radius: 999px;
  background: var(--rouge); color: var(--blanc);
  box-shadow: var(--ombre-bouton);
  font-family: inherit; font-size: 19px; font-weight: 700; line-height: 1;   /* 19 px gras = « gros texte » WCAG */
  white-space: nowrap; text-decoration: none; word-break: normal;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.wp-block-button .wp-block-button__link:hover { transform: translateY(-1px); background: var(--rouge-fonce); }
/* Sur un bloc noir, l'ombre rouge devient un halo lumineux : on la retire. */
:is(.bloc-contact, .aside-noir, .bloc-double.sombre, .panne--sombre) .wp-block-button .wp-block-button__link { box-shadow: none; }

.wp-block-button.b-noir .wp-block-button__link { background: var(--encre); color: var(--sur-encre); box-shadow: none; }
.wp-block-button.b-noir .wp-block-button__link:hover { background: var(--encre-survol); }

.wp-block-button.b-contour .wp-block-button__link { border-color: var(--contour); background: transparent; color: var(--encre); box-shadow: none; }
.wp-block-button.b-contour .wp-block-button__link:hover { border-color: var(--encre); background: transparent; }

.wp-block-button.b-contour-clair .wp-block-button__link { border-color: rgb(255 255 255 / .3); background: transparent; color: var(--blanc); box-shadow: none; }
.wp-block-button.b-contour-clair .wp-block-button__link:hover { border-color: var(--blanc); background: transparent; }

.wp-block-button.b-compact .wp-block-button__link { min-height: 44px; padding: 0 20px; }

/* Icône avant le texte (i-telephone, i-calendrier…) et flèche après (fleche). */
.wp-block-button[class*=" i-"] .wp-block-button__link::before,
.wp-block-button.fleche .wp-block-button__link::after {
  content: ""; flex: none; width: 19px; height: 19px;
  background: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
          mask: var(--icone) center / contain no-repeat;
}
.wp-block-button.fleche .wp-block-button__link::after {
  -webkit-mask-image: var(--icone-fleche); mask-image: var(--icone-fleche);
  transition: transform .2s ease;
}
.wp-block-button.fleche .wp-block-button__link:hover::after { transform: translateX(3px); }

/* Lien texte suivi d'une flèche (« En savoir plus »). */
.lien-fleche { margin-top: auto; padding-top: 8px; font-weight: 700; }
.lien-fleche a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.lien-fleche a::after {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--icone-fleche) center / contain no-repeat; mask: var(--icone-fleche) center / contain no-repeat;
  transition: transform .2s ease;
}
.lien-fleche a:hover { color: var(--rouge-texte); }
.lien-fleche a:hover::after { transform: translateX(4px); }

/* Pastille noire ronde, à cheval sur un bord (référence A). Commune à plusieurs composants.
   :is(figure, div) : le cadre photo est une <figure> dans une page en blocs, une <div> dans
   une page Elementor (même force de sélecteur dans les deux cas). */
:is(figure, div).carte-service-photo::after,
:is(figure, div).bloc-double-photo::after,
.zones::before,
blockquote.carte-avis::before {
  content: ""; position: absolute; z-index: 1;
  width: 68px; height: 68px;
  border: 4px solid var(--surface); border-radius: 50%;
  background: var(--pastille) var(--icone) center / 28px no-repeat;
}

/* --- 5. Statut ouvert / fermé ------------------------------------------- */
/* Les cinq variantes sont dans le contenu ; app.js pose data-etat sur .statut. */
.statut {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 600; color: var(--gris); white-space: nowrap;
}
.statut::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); }
.statut[data-etat="ouvert"] { color: var(--encre); }
.statut[data-etat="ouvert"]::before { animation: pouls 2s ease-out infinite; }

.statut > p { display: none; }
.statut:not([data-etat]) > .statut-horaires,
.statut[data-etat="ouvert"] > .statut-ouvert,
.statut[data-etat="avant"] > .statut-avant,
.statut[data-etat="demain"] > .statut-demain,
.statut[data-etat="lundi"] > .statut-lundi { display: block; }

@keyframes pouls {
  0%   { box-shadow: 0 0 0 0 rgb(251 1 1 / .55); }
  70%  { box-shadow: 0 0 0 9px rgb(251 1 1 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(251 1 1 / 0); }
}

/* --- 6. En-tête (template part) ----------------------------------------- */
/* Le collant se pose sur l'élément <header> de la template part : un bloc collant
   ne colle que dans son parent, et le parent du groupe intérieur a sa hauteur exacte. */
/* Capsule noire flottante : la barre se détache du haut de la page et laisse voir le
   contenu défiler autour d'elle. Les liens sont regroupés dans une seconde pilule, la
   page en cours est une pastille rouge pleine. Le <header> reste transparent ; c'est le
   groupe intérieur (.entete-rangee, aussi .enveloppe) qui porte la capsule. */
.entete-site {
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50;
  padding-top: 12px; pointer-events: none;
}
.entete-rangee {
  position: relative; isolation: isolate; pointer-events: auto;
  display: flex; align-items: center; gap: 24px;
  height: 72px; padding: 0 10px 0 28px;
  border-radius: 999px;
  color: var(--blanc);
}
/* Le verre est sur un calque à part : un backdrop-filter sur la capsule elle-même
   enfermerait dedans le menu mobile (position fixe) au lieu de couvrir l'écran. */
.entete-rangee::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1px solid rgb(255 255 255 / .08); border-radius: inherit;
  background: var(--verre);   /* noir fumé : on devine la page derrière */
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / .55);
}

.logo { flex: none; margin: 0; }
.logo img { width: auto !important; height: 26px; }   /* le bloc logo impose sa largeur en style en ligne */
/* Sur fond noir, la version claire du logo (« PHONE » en blanc) remplace l'image de la
   médiathèque à l'affichage ; l'image reste en place, invisible, pour sa taille et son alt. */
.entete-site .logo a, .pied .logo a {
  display: block;
  background: url(assets/img/logo-clair.png) left center / contain no-repeat;
}
.entete-site .logo img, .pied .logo img { opacity: 0; }

.wp-block-navigation.nav { margin-inline: auto; }
.wp-block-navigation.nav:not(:has(.is-menu-open)) .wp-block-navigation__container {
  gap: 4px; padding: 5px;
  border: 1px solid rgb(255 255 255 / .12); border-radius: 999px;
}
.wp-block-navigation.nav .wp-block-navigation-item__content {
  padding: 10px 18px; border-radius: 999px;
  font-size: 18px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  color: rgb(255 255 255 / .86); text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.wp-block-navigation.nav .wp-block-navigation-item__content:hover { background: rgb(255 255 255 / .08); color: var(--blanc); }
.wp-block-navigation.nav .wp-block-navigation-item__content[aria-current="page"] { background: var(--rouge-fonce); color: var(--blanc); }   /* 5,6:1 */

/* Bouton d'ouverture du menu mobile et panneau ouvert. Le CSS du bloc navigation est
   imprimé après cette feuille : les forçages !important sont ici justifiés (méthode). */
.wp-block-navigation.nav .wp-block-navigation__responsive-container-open {
  width: 48px; height: 48px; align-items: center; justify-content: center;
  border: 1px solid rgb(255 255 255 / .2); border-radius: 50%; color: var(--blanc);
}
/* Menu ouvert : une carte flottante sous la capsule, pas un panneau plein écran. Elle
   suit la gouttière de la page, donc reste dans l'écran à toutes les largeurs. */
.wp-block-navigation.nav .wp-block-navigation__responsive-container.is-menu-open {
  inset: calc(var(--wp-admin--admin-bar--height, 0px) + 84px) var(--gouttiere) auto auto !important;
  width: min(360px, calc(100vw - 2 * var(--gouttiere))); height: auto !important;
  max-height: calc(100dvh - 104px - var(--wp-admin--admin-bar--height, 0px));
  padding: 10px !important; overflow-y: auto;
  border: 1px solid rgb(255 255 255 / .12); border-radius: 28px;
  background-color: var(--verre) !important;   /* même verre fumé que la capsule */
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  color: var(--blanc) !important;
  box-shadow: 0 24px 48px -20px rgb(0 0 0 / .6);
}
/* Le bloc navigation fige la page (overflow: hidden) tant que le menu est ouvert ; la
   carte ne couvre plus l'écran, donc la page doit rester défilable derrière elle. */
html.has-modal-open { overflow: visible !important; }
.wp-block-navigation.nav .is-menu-open { overscroll-behavior: contain; }
.wp-block-navigation.nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0 !important; }
.wp-block-navigation.nav .is-menu-open .wp-block-navigation__responsive-dialog { margin: 0; padding: 0; }
.wp-block-navigation.nav .is-menu-open .wp-block-navigation__responsive-container-close { display: none; }   /* fermeture : bouton de la capsule, clic dehors, Échap (app.js) */
.wp-block-navigation.nav .is-menu-open .wp-block-navigation__container { gap: 2px; width: 100%; align-items: stretch; }
/* Dans la carte, la page en cours garde sa pastille rouge, sans contour de focus autour ;
   le focus clavier se voit par un fond clair. */
.wp-block-navigation.nav .is-menu-open .wp-block-navigation-item__content:focus-visible { outline: none; }
.wp-block-navigation.nav .is-menu-open .wp-block-navigation-item__content:not([aria-current="page"]):focus-visible { background: rgb(255 255 255 / .12); }
.wp-block-navigation.nav .is-menu-open .wp-block-navigation-item__content { display: block; padding: 14px 20px; font-size: 20px; font-weight: 600; white-space: normal; }
/* Menu ouvert : l'icône ≡ devient ✕ (classe « menu-ouvert » posée par app.js). */
.wp-block-navigation.nav.menu-ouvert .wp-block-navigation__responsive-container-open svg { display: none; }
.wp-block-navigation.nav.menu-ouvert .wp-block-navigation__responsive-container-open::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.entete-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.entete-actions .statut { color: rgb(255 255 255 / .72); }   /* le gris sombre ne tient pas sur le verre fumé */
.entete-actions .statut[data-etat="ouvert"] { color: var(--blanc); }
.entete-rdv .wp-block-button .wp-block-button__link { box-shadow: none; }

/* Choix clair / sombre : deux pastilles côte à côte dans une pilule, dessinée comme celle du
   menu (même filet, mêmes arrondis). Le choix en cours est allumé, l'autre reste en retrait.
   Ce sont des paragraphes (règle 5) que app.js rend actionnables ; le mot (« Clair »,
   « Sombre ») reste dans le contenu pour les lecteurs d'écran et s'affiche dans le menu mobile. */
.bascule-theme {
  display: flex; flex: none; gap: 2px; padding: 4px;
  border: 1px solid rgb(255 255 255 / .12); border-radius: 999px;
}
.bascule-theme > p {
  /* Flex et non grille : le mot masqué formerait une seconde ligne et pousserait l'icône vers le haut. */
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0;
  border-radius: 50%;
  font-size: 0; color: rgb(255 255 255 / .55); cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.bascule-theme > p::before {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
}
.bascule-clair { --icone: var(--icone-soleil); }
.bascule-sombre { --icone: var(--icone-lune); }
.bascule-theme > p:hover { background: rgb(255 255 255 / .08); color: var(--blanc); }
.bascule-theme > p[aria-pressed="true"] { background: rgb(255 255 255 / .16); color: var(--blanc); cursor: default; }
:root:not([data-theme]) .bascule-theme { display: none; }   /* sans script, la page suit l'appareil : pas de bouton inutile */

/* Dans la carte du menu mobile (copie posée par app.js) : une ligne « Apparence » avec les mots. */
.bascule-menu {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  order: 9; align-self: stretch;   /* sous les liens, qui reçoivent un ordre (3) dans la carte */
  margin-top: 8px; padding: 14px 8px 4px 20px;
  border-top: 1px solid rgb(255 255 255 / .12);
}
.bascule-menu::before { content: "Apparence"; font-size: 17px; font-weight: 600; color: rgb(255 255 255 / .72); }
.bascule-menu .bascule-theme > p {
  gap: 8px; width: auto; padding: 0 16px;
  border-radius: 999px; font-size: 17px; font-weight: 600;
}
@media (min-width: 641px) { .bascule-menu { display: none; } }   /* au-dessus, le choix tient dans la capsule */

/* --- 7. Accueil (hero) -------------------------------------------------- */
/* Halo derrière les appareils : présent dans les deux références. */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 7vw, 112px);
  background: radial-gradient(ellipse 42% 68% at 62% 50%, rgb(251 1 1 / .14), transparent 72%);
  --gris: var(--gris-halo);   /* sur le halo rosé, le gris normal tombe à 4:1 : on le fonce pour rester AA */
}
.hero > .enveloppe {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: clamp(40px, 5vw, 80px);
}

.hero-titre {
  margin: 0 0 28px;
  font-size: clamp(54px, 7vw, 104px);
  font-weight: 700; line-height: .92; letter-spacing: -.015em;
  hyphens: none;
}
.hero-titre em { font-style: normal; color: var(--rouge); }   /* <em> nu : seul accent valide dans un titre (substitution 4) */

.hero-texte { max-width: 32em; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: var(--gris); }

.hero-actions, .actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-actions { margin-top: 36px; }

/* Note Google : étoiles dessinées en CSS, texte éditable dans le paragraphe. */
.note-avis { margin-top: 22px; font-size: 18px; color: var(--gris); }
.note-avis a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; text-decoration: none; }
.note-avis a::before {
  content: ""; width: 98px; height: 18px; background: var(--rouge);
  -webkit-mask: var(--icone-etoile) 0 0 / 19.6px 18px repeat-x; mask: var(--icone-etoile) 0 0 / 19.6px 18px repeat-x;
}
.note-avis strong { font-weight: 700; color: var(--encre); }
.note-avis a:hover { text-decoration: underline; }

/* Atouts : une liste, une icône par élément (classe i-… sur l'élément). */
.atouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 52px; }
.atouts > li { padding: 0 18px; border-left: 1px solid var(--trait); font-size: 16px; line-height: 1.35; color: var(--gris); }
.atouts > li:first-child { padding-left: 0; border-left: 0; }
.atouts > li::before {
  /* 22 px : reproduit l'espace validé de la maquette, où l'icône en ligne laissait 8 px sous elle. */
  content: ""; display: block; width: 30px; height: 30px; margin-bottom: 22px; background: var(--rouge);
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
}
.atouts strong { display: block; margin-bottom: 2px; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--encre); }

/* L'image sort du conteneur jusqu'au bord droit de la fenêtre. */
.hero-visuel { position: relative; margin-right: calc((min(100vw - 2 * var(--gouttiere), var(--largeur)) - 100vw) / 2); }

/* Le blanc de la photo se fond dans le fond (mode « produit ») ; le sol des podiums
   s'efface en bas et à gauche au lieu de s'arrêter net. */
:is(figure, div).hero-image img {
  width: calc(100% + 96px); max-width: none; height: auto;
  margin-left: -96px;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%), linear-gradient(to top, transparent, #000 16%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 10%), linear-gradient(to top, transparent, #000 16%);
          mask-composite: intersect;
}

/* --- 8. Bandeau des marques --------------------------------------------- */
.marques { padding: 56px 0 64px; background: var(--surface); text-align: center; }
/* Sans script (ou mouvement réduit) : liste fixe centrée. app.js pose data-marque sur
   chaque nom qui a un logo, puis duplique la liste pour la faire défiler en boucle. */
.defilement { margin-top: 36px; }
.piste { display: flex; justify-content: center; }
.piste ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 72px; }
.piste li { font-size: clamp(28px, 2.8vw, 36px); font-weight: 700; line-height: 1; letter-spacing: .02em; color: var(--gris-sombre); white-space: nowrap; }

/* Logos monochromes : le fichier SVG sert de masque, la couleur vient du gris du thème.
   Le nom reste dans la page (lecteurs d'écran, référencement), simplement poussé hors champ.
   Un nom sans logo (Redmi, Xbox, ou une marque ajoutée plus tard) reste écrit en texte. */
.piste li[data-marque] {
  width: calc(var(--h) * var(--ratio)); height: var(--h);
  overflow: hidden; text-indent: 200%;
  background: var(--gris-sombre);
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
}
.piste [data-marque="apple"]       { --logo: url(assets/img/marques/apple.svg);       --ratio: .81;  --h: 44px; }
.piste [data-marque="samsung"]     { --logo: url(assets/img/marques/samsung.svg);     --ratio: 6.54; --h: 24px; }
.piste [data-marque="xiaomi"]      { --logo: url(assets/img/marques/xiaomi.svg);      --ratio: 1;    --h: 40px; }
.piste [data-marque="oppo"]        { --logo: url(assets/img/marques/oppo.svg);        --ratio: 4.21; --h: 28px; }
.piste [data-marque="honor"]       { --logo: url(assets/img/marques/honor.svg);       --ratio: 5.2;  --h: 26px; }
.piste [data-marque="playstation"] { --logo: url(assets/img/marques/playstation.svg); --ratio: 1.28; --h: 40px; }
.piste [data-marque="nintendo"]    { --logo: url(assets/img/marques/nintendo.svg);    --ratio: 4.05; --h: 34px; }

.defilement.en-boucle {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.en-boucle .piste { width: max-content; justify-content: flex-start; animation: defile 40s linear infinite; }
.en-boucle .piste ul { flex-wrap: nowrap; padding-right: 72px; }
.en-boucle:hover .piste, .en-boucle:focus-within .piste, .en-boucle.en-pause .piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }

/* Contenu qui bouge plus de 5 s : un bouton permet de l'arrêter (WCAG 2.2.2). */
.defilement-pause {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; padding: 0 18px;
  border: 1px solid var(--trait); border-radius: 999px; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--gris);
}
.defilement-pause:hover { border-color: var(--encre); color: var(--encre); }

/* --- 9. Services -------------------------------------------------------- */
.services { padding: clamp(88px, 9vw, 136px) 0; }
/* Trois cartes par rangée sur une grille de six colonnes : une rangée incomplète de deux
   cartes les élargit (une demi-largeur chacune) au lieu de laisser un trou. */
.cartes-services { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.cartes-services > * { grid-column: span 2; }
.cartes-services > :nth-last-child(2):nth-child(3n + 1),
.cartes-services > :nth-last-child(2):nth-child(3n + 1) ~ * { grid-column: span 3; }

.carte-service {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--bord-carte); border-radius: var(--rayon);
  background: var(--surface);
  transition: transform .3s ease, box-shadow .3s ease;
}
.carte-service:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); }

:is(figure, div).carte-service-photo { position: relative; height: 236px; background: var(--surface); }
:is(figure, div).carte-service-photo img { width: 100%; height: 100%; object-fit: cover; }
/* L'écran de la montre est dans le haut de la photo : sur une carte large (rangée de deux,
   carte seule en tablette), un recadrage centré le couperait. */
:is(figure, div).carte-service-photo.i-montre img { object-position: 50% 25%; }
:is(figure, div).carte-service-photo::after { left: 22px; bottom: -34px; }

.carte-service-corps { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 52px 26px 28px; }
.carte-service h3 { font-size: 27px; font-weight: 700; line-height: 1.1; }
.carte-service p { font-size: 17px; line-height: 1.5; color: var(--gris); }
.carte-service .lien-fleche { font-size: 18px; color: var(--encre); }

.bandeau {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  margin-top: 24px; padding: 36px 44px;
  border: 1px solid var(--bord-carte); border-radius: var(--rayon);
  background: var(--surface);
}
.bandeau h2, .bandeau h3 { font-size: clamp(28px, 2.6vw, 36px); font-weight: 700; line-height: 1.1; }
.bandeau p { max-width: 34em; margin-top: 8px; color: var(--gris); }

.services-pied { justify-content: center; margin-top: 56px; }

/* --- 10. Grille des pannes ---------------------------------------------- */
.pannes { padding: clamp(88px, 9vw, 136px) 0; background: var(--surface); }
.grille-pannes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }

.panne {
  grid-column: span 2;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 290px; padding: 34px;
  border-radius: var(--rayon);
  background: var(--fond);
}
.panne:nth-child(-n + 2) { grid-column: span 3; min-height: 320px; }
.panne-etiquette { font-size: 17px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.panne h3 { font-size: clamp(30px, 2.8vw, 40px); font-weight: 700; line-height: 1.05; }
.panne p:not(.panne-etiquette) { max-width: 30em; font-size: 17px; line-height: 1.5; color: var(--gris); }
.panne::after {
  content: ""; width: 40px; height: 40px; margin-top: auto; background: var(--rouge);
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
}
.panne--sombre { background: var(--noir); color: var(--blanc); }
.panne--sombre .panne-etiquette,
.panne--sombre p:not(.panne-etiquette) { color: var(--gris-sombre); }

/* --- 11. Atelier mobile ------------------------------------------------- */
.mobile { padding: clamp(88px, 9vw, 136px) 0; }
.bloc-mobile {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(32px, 5vw, 72px);
  border: 1px solid var(--bord-carte); border-radius: var(--rayon);
  background: var(--surface);
}
.bloc-mobile-texte { display: grid; justify-items: start; gap: 18px; }
.bloc-mobile-texte > p:not(.surtitre) { max-width: 30em; font-size: 18px; color: var(--gris); }
.bloc-mobile-texte .actions { margin-top: 12px; }

.zones { position: relative; padding: 56px clamp(24px, 3vw, 40px) 32px; border-radius: var(--rayon); background: var(--fond); }
.zones::before { top: -34px; left: clamp(24px, 3vw, 40px); }

.liste-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.liste-zones > li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--trait);
  font-size: 17px; font-weight: 600;
}
.liste-zones strong { min-width: 2.2ch; font-size: 34px; font-weight: 700; color: var(--gris-sombre); }
.liste-zones em { margin-left: auto; white-space: nowrap; font-size: 14px; font-style: normal; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rouge-texte); }
.liste-zones > li.zone-base strong { color: var(--rouge); }
.zones-note { margin-top: 22px; font-size: 15px; color: var(--gris); }
.zones-note a { font-weight: 600; color: var(--encre); white-space: nowrap; }

/* --- 12. Étapes : frise numérotée par compteur CSS ------------------------ */
.etapes { padding: clamp(80px, 8vw, 120px) 0; background: var(--surface); }
.frise { counter-reset: etape; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
/* Le fil relie le centre de la 1re pastille au centre de la dernière. */
.frise::before { content: ""; position: absolute; top: 33px; left: 34px; right: calc(25% - 64px); height: 2px; background: var(--trait); }
.frise > li { counter-increment: etape; position: relative; display: grid; align-content: start; gap: 8px; font-size: 17px; line-height: 1.5; color: var(--gris); }
.frise > li::before {
  content: counter(etape);
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 68px; height: 68px; margin-bottom: 14px;
  border: 6px solid var(--surface); border-radius: 50%;
  background: var(--pastille); color: var(--blanc);
  font-size: 26px; font-weight: 700; line-height: 1;
}
.frise > li:last-child::before { background: var(--rouge); }
.frise strong { display: block; font-size: 27px; font-weight: 700; line-height: 1.1; color: var(--encre); }

/* --- 13. Avis ----------------------------------------------------------- */
.avis { padding: clamp(88px, 9vw, 136px) 0; }
.avis-note { display: grid; justify-items: center; gap: 14px; text-align: center; }
.avis-chiffre {
  padding-bottom: .06em;
  font-size: clamp(130px, 17vw, 250px);
  font-weight: 700; line-height: .9; letter-spacing: -.02em;
}
.avis-chiffre em { font-size: .3em; font-style: normal; letter-spacing: 0; color: var(--gris); }
.avis-note::after {
  content: ""; order: 1; width: 162px; height: 30px; background: var(--rouge);
  -webkit-mask: var(--icone-etoile) 0 0 / 32.4px 30px repeat-x; mask: var(--icone-etoile) 0 0 / 32.4px 30px repeat-x;
}
.avis-note > p:not(.avis-chiffre) { order: 2; font-size: 18px; color: var(--gris); }

.cartes-avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 24px; margin-top: clamp(80px, 8vw, 112px); }
blockquote.carte-avis {
  position: relative; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 52px 30px 34px;
  border: 0; border-radius: var(--rayon);
  background: var(--surface);
  text-align: center;
}
blockquote.carte-avis::before { top: -34px; left: 50%; margin-left: -34px; border-color: var(--fond); background-size: 26px; }
.carte-avis p { font-size: 18px; line-height: 1.5; color: var(--gris); }
.carte-avis p::before { content: "«\00a0"; }
.carte-avis p::after { content: "\00a0»"; }
.carte-avis cite {
  order: -1; display: grid; justify-items: center; gap: 8px;
  font-size: 23px; font-style: normal; font-weight: 700; line-height: 1.1; color: var(--encre);
}
.carte-avis cite::after {
  content: ""; width: 98px; height: 18px; background: var(--rouge);
  -webkit-mask: var(--icone-etoile) 0 0 / 19.6px 18px repeat-x; mask: var(--icone-etoile) 0 0 / 19.6px 18px repeat-x;
}

.avis-pied { display: grid; justify-items: center; gap: 22px; margin-top: 48px; text-align: center; }
.avis-mention { max-width: 34em; font-size: 15px; line-height: 1.5; color: var(--gris); }

/* --- 14. Contact (bloc noir encarté) ------------------------------------ */
.contact { padding: clamp(64px, 7vw, 112px) 0; background: var(--fond-clair); }
.bloc-contact {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(36px, 5.5vw, 80px);
  border-radius: var(--rayon);
  background: var(--noir); color: var(--blanc);
}
.bloc-contact h2 { font-size: clamp(44px, 5vw, 72px); font-weight: 700; line-height: .95; letter-spacing: -.01em; }
.bloc-contact-texte > p { max-width: 26em; margin-top: 20px; font-size: 18px; color: var(--gris-sombre); }
.bloc-contact-texte .actions { margin-top: 32px; }

.coordonnee {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: baseline; gap: 4px 16px;
  padding: 20px 0; border-top: 1px solid rgb(255 255 255 / .14);
}
.coordonnee:last-child { border-bottom: 1px solid rgb(255 255 255 / .14); }
.coordonnee-libelle { font-size: 16px; color: var(--gris-sombre); }
.coordonnee-valeur { font-size: 19px; font-weight: 600; line-height: 1.45; }
.coordonnee-valeur a { text-decoration: none; }
.coordonnee-valeur a:hover { text-decoration: underline; }
.coordonnee-horaires { font-weight: 500; color: var(--gris-sombre); }
.coordonnee-horaires strong { font-weight: 600; color: var(--blanc); }
.coordonnee > .statut { font-size: 19px; color: var(--blanc); }
/* « Copier » se place sur la même ligne que le numéro, comme dans la maquette. */
.coordonnee:has(> .copier) { grid-template-columns: 130px auto minmax(0, 1fr); }
.coordonnee > .copier { margin-left: 10px; }

/* « Copier » : un paragraphe, rendu cliquable par app.js (rôle, clavier, presse-papiers). */
.copier {
  width: fit-content; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--gris-sombre);
  text-decoration: underline; text-underline-offset: 3px;
}
.copier:hover { color: var(--blanc); }
.copier.est-copie { position: relative; color: transparent; text-decoration-color: transparent; }
.copier.est-copie::after { content: "Copié"; position: absolute; left: 0; color: var(--blanc); }

/* --- 15. Pied de page et barre mobile (template part) ------------------- */
/* Même matière que l'en-tête : un bloc noir arrondi posé sur la page, et la ligne
   légale dans une pilule bordée, comme le groupe de liens du menu. */
.pied { padding: 24px 0 16px; background: var(--fond); }
.pied > .enveloppe {
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px) clamp(16px, 2vw, 20px);
  border: 1px solid rgb(255 255 255 / .08); border-radius: 40px;
  background: var(--noir); color: var(--blanc);
}
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
.pied .logo img { height: 30px; }
.pied-marque > p { max-width: 24em; margin-top: 20px; font-size: 17px; color: var(--gris-sombre); }
.pied h2 { margin-bottom: 18px; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-sombre); }
.pied-liens li + li { margin-top: 10px; }
.pied li, .pied-adresse { font-size: 17px; line-height: 1.6; }
.pied-adresse { color: var(--gris-sombre); }
.pied a { color: rgb(255 255 255 / .86); text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; text-underline-offset: 4px; }
.pied-bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin-top: 48px; padding: 6px 6px 6px 24px;
  border: 1px solid rgb(255 255 255 / .12); border-radius: 999px;
  font-size: 16px; color: var(--gris-sombre);
}
.pied-legal { display: flex; flex-wrap: wrap; gap: 4px; }
.pied-legal a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; }
.pied-legal a:hover { background: rgb(255 255 255 / .08); text-decoration: none; }

.barre-mobile { display: none; }

/* --- 15 bis. Bandeau de cookies ------------------------------------------ */
.bandeau-cookies {
  position: fixed; left: 24px; bottom: 24px; z-index: 70;
  display: grid; gap: 12px;
  width: min(420px, calc(100vw - 48px)); padding: 24px;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--surface); color: var(--encre);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / .35);
}
.bandeau-cookies-titre { margin: 0; font-size: 24px; line-height: 1.1; }
.bandeau-cookies-texte { margin: 0; font-size: 17px; line-height: 1.4; color: var(--gris); }
.bandeau-cookies-texte a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.bandeau-cookies-texte a:hover { color: var(--rouge-texte); }
.bandeau-cookies-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.bandeau-cookies-bouton {
  min-height: 48px; padding: 0 16px;
  border: 1.5px solid var(--encre); border-radius: 999px;
  background: transparent; color: var(--encre);
  font: inherit; font-size: 19px; font-weight: 700; line-height: 1; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.bandeau-cookies-bouton:hover { background: var(--encre); color: var(--sur-encre); }
.gerer-cookies a { cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .bandeau-cookies { animation: bandeau-cookies-entree .5s var(--courbe) both; }
}
@keyframes bandeau-cookies-entree { from { opacity: 0; transform: translateY(16px); } }

/* --- 16. Pages internes ------------------------------------------------- */
.page-entete { padding: clamp(48px, 6vw, 96px) 0 clamp(40px, 5vw, 72px); text-align: center; }
.page-entete > .enveloppe { display: grid; justify-items: center; gap: 20px; }
.page-entete .chapeau { max-width: 38em; }
.page-entete.compacte { padding-bottom: clamp(24px, 3vw, 40px); }

.fil-ariane { font-size: 16px; font-weight: 600; color: var(--encre); }
/* Souligné : un lien ne doit pas se reconnaître à sa seule couleur (WCAG 1.4.1). */
.fil-ariane a { color: var(--gris); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fil-ariane a:hover { color: var(--rouge-texte); }

.sommaire { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.sommaire a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border: 1.5px solid var(--contour); border-radius: 999px;
  font-weight: 700; text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.sommaire a:hover { border-color: var(--encre); background: var(--encre); color: var(--sur-encre); }

/* Bloc double : photo collée au bord d'un côté, texte de l'autre, pastille à la jonction. */
.reparation { padding: clamp(12px, 1.5vw, 20px) 0; }
.bloc-double {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  overflow: hidden;
  border: 1px solid var(--bord-carte); border-radius: var(--rayon);
  background: var(--surface);
}
:is(figure, div).bloc-double-photo { position: relative; z-index: 1; min-height: 420px; }
:is(figure, div).bloc-double-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:is(figure, div).bloc-double-photo::after { top: 50%; right: -34px; margin-top: -34px; }
.bloc-double-texte { display: grid; align-content: center; justify-items: start; gap: 18px; padding: clamp(40px, 5vw, 72px); }
.bloc-double-texte > p:not(.surtitre) { max-width: 34em; font-size: 18px; color: var(--gris); }

.bloc-double.inverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.bloc-double.inverse :is(figure, div).bloc-double-photo { order: 2; }
.bloc-double.inverse :is(figure, div).bloc-double-photo::after { right: auto; left: -34px; }

.bloc-double.sombre { border-color: transparent; background: var(--noir); color: var(--blanc); }
.bloc-double.sombre .surtitre,
.bloc-double.sombre .bloc-double-texte > p:not(.surtitre) { color: var(--gris-sombre); }
.bloc-double.sombre :is(figure, div).bloc-double-photo::after { border-color: var(--noir); background-color: var(--rouge); }

.liste-coches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; width: 100%; margin: 6px 0 10px; }
.liste-coches > li { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; font-weight: 600; line-height: 1.35; }
.liste-coches > li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; background: var(--rouge);
  -webkit-mask: var(--icone-coche) center / contain no-repeat; mask: var(--icone-coche) center / contain no-repeat;
}

.appel { padding: clamp(12px, 1.5vw, 20px) 0 clamp(88px, 9vw, 136px); }
.appel .bandeau { margin-top: 0; }
.appel .actions { flex-wrap: nowrap; }

.approche { padding-bottom: clamp(64px, 7vw, 104px); }
.valeurs { padding: clamp(88px, 9vw, 136px) 0; background: var(--surface); }
.grille-valeurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grille-valeurs > .panne { grid-column: auto; min-height: 280px; }

.chiffres { padding: clamp(64px, 7vw, 104px) 0; }
.liste-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }
.liste-chiffres > li {
  display: grid; justify-items: center; align-content: start; gap: 12px;
  padding: 0 20px; border-left: 1px solid var(--trait);
  font-size: 18px; line-height: 1.35; color: var(--gris);
}
.liste-chiffres > li:first-child { border-left: 0; }
.liste-chiffres strong { font-size: clamp(64px, 7.5vw, 112px); font-weight: 700; line-height: .9; color: var(--encre); }

/* --- 17. Formulaires (Contact Form 7) ----------------------------------- */
.page-formulaire { padding: 0 0 clamp(88px, 9vw, 136px); }
.page-formulaire > .enveloppe { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px; align-items: start; }
.page-formulaire.seul { padding-top: clamp(88px, 9vw, 136px); }
.page-formulaire.seul > .enveloppe { width: min(100% - 2 * var(--gouttiere), 860px); grid-template-columns: minmax(0, 1fr); }

.carte-formulaire { padding: clamp(28px, 4vw, 56px); border: 1px solid var(--bord-carte); border-radius: var(--rayon); background: var(--surface); }
.formulaire { display: grid; gap: 24px; }
.champ { display: grid; gap: 8px; }
.champ label, .champ-groupe legend { font-size: 18px; font-weight: 700; }
.facultatif { font-weight: 500; color: var(--gris); }
.wpcf7-form-control-wrap { display: block; }   /* sinon l'enrobage de CF7 ajoute 5 à 13 px sous chaque champ */

.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 56px; padding: 0 22px;
  border: 1.5px solid var(--trait); border-radius: 999px;
  background-color: var(--fond-clair);
  font: inherit; color: var(--encre);
  transition: border-color .2s ease, background-color .2s ease;
}
.champ textarea { min-height: 150px; padding: 16px 22px; border-radius: var(--rayon); resize: vertical; }
.champ select {
  appearance: none; padding-right: 52px; cursor: pointer;
  background-image: var(--icone-chevron); background-repeat: no-repeat; background-position: right 20px center; background-size: 18px;
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris); }   /* 4,9:1 : le gris sombre tombait à 3,2:1 */
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--contour-fort); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--encre); background-color: var(--champ-actif); }
.champ .wpcf7-not-valid { border-color: var(--rouge); }

/* Choix en pastilles : le vrai bouton radio reste présent (clavier, lecteur d'écran), mais invisible. */
.champ-groupe { min-width: 0; margin: 0; padding: 0; border: 0; }
.champ-groupe legend { margin-bottom: 12px; padding: 0; }
.choix .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.choix .wpcf7-list-item { margin: 0; }
.choix .wpcf7-list-item label { position: relative; display: block; cursor: pointer; }
.choix input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choix .wpcf7-list-item-label {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  border: 1.5px solid var(--trait); border-radius: 999px;
  background: var(--fond-clair); font-weight: 700;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.choix label:hover .wpcf7-list-item-label { border-color: var(--contour-fort); }
.choix input:checked + .wpcf7-list-item-label { border-color: var(--encre); background: var(--encre); color: var(--sur-encre); }
.choix input:focus-visible + .wpcf7-list-item-label { outline: 3px solid var(--rouge); outline-offset: 3px; }

.choix-large .wpcf7-radio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choix-large .wpcf7-list-item-label { display: flex; width: 100%; min-height: 64px; padding: 0 22px; border-radius: var(--rayon); font-size: 20px; }

/* L'adresse d'intervention ne s'affiche que si « À domicile » est choisi.
   Sans :has() (navigateurs anciens), le champ reste simplement visible. */
.formulaire:has(input[name="lieu"][value="À l'atelier"]:checked) .champ-adresse { display: none; }

/* Champ piège de l'anti-spam (functions.php) : hors de l'écran pour les visiteurs, toujours
   présent pour les robots qui remplissent tout. Pas display: none, que certains robots repèrent. */
.champ-piege { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.champs-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mention-rgpd, .formulaire-note { font-size: 16px; color: var(--gris); }
.mention-rgpd a { font-weight: 600; color: var(--encre); }
.formulaire-envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

.formulaire .bouton-envoi {
  min-height: 54px; padding: 0 28px;
  border: 0; border-radius: 999px;
  background: var(--rouge); color: var(--blanc);
  box-shadow: var(--ombre-bouton);
  font: inherit; font-size: 19px; font-weight: 700; cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.formulaire .bouton-envoi:hover { background: var(--rouge-fonce); transform: translateY(-1px); }

.formulaire .wpcf7-not-valid-tip { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--rouge-texte); }
.carte-formulaire .wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0; padding: 14px 20px;
  border: 1.5px solid var(--trait); border-radius: var(--rayon);
  font-size: 16px;
}
.carte-formulaire .wpcf7 form.invalid .wpcf7-response-output,
.carte-formulaire .wpcf7 form.unaccepted .wpcf7-response-output,
.carte-formulaire .wpcf7 form.failed .wpcf7-response-output,
.carte-formulaire .wpcf7 form.spam .wpcf7-response-output { border-color: var(--rouge); }
.carte-formulaire .wpcf7 form.sent .wpcf7-response-output { border-color: var(--encre); }

/* Encart noir à côté du formulaire de rendez-vous. */
.aside-noir {
  position: sticky; top: 104px;
  display: grid; gap: 18px;
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--rayon);
  background: var(--noir); color: var(--blanc);
}
.aside-noir h2 { font-size: clamp(30px, 2.6vw, 38px); font-weight: 700; line-height: 1; }
.tel-grand { font-size: clamp(32px, 3vw, 42px); font-weight: 700; line-height: 1; }
.tel-grand a { text-decoration: none; }
.tel-grand a:hover { color: var(--rouge); }
.aside-noir .statut { font-size: 18px; color: var(--blanc); }
.aside-noir .coordonnee { grid-template-columns: 96px minmax(0, 1fr); }

/* --- 18. Textes légaux -------------------------------------------------- */
.texte-legal { padding: 0 0 clamp(88px, 9vw, 136px); }
.texte-legal-corps {
  display: grid; gap: 40px;
  max-width: 820px; margin: 0 auto;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--rayon);
  background: var(--surface);
}
.texte-legal h2 { margin-bottom: 14px; font-size: clamp(26px, 2.6vw, 32px); font-weight: 700; line-height: 1.1; }
.texte-legal p, .texte-legal li { font-size: 18px; line-height: 1.6; }
.texte-legal p + p, .texte-legal ul + p { margin-top: 12px; }
.texte-legal ul { display: grid; gap: 6px; margin-top: 12px; padding-left: 1.2em; list-style: disc; }
.texte-legal li::marker { color: var(--rouge); }
.texte-legal ul.liste-legale { padding-left: 0; list-style: none; gap: 10px; }
.texte-legal a { font-weight: 600; color: var(--encre); }
/* Information manquante, à fournir avant la mise en ligne (format « code » de l'éditeur). */
.texte-legal code {
  padding: 0 2px; border-bottom: 2px dashed var(--rouge); background: none;
  font-family: inherit; font-size: inherit; font-weight: 700; color: var(--rouge-texte);
}

/* --- 19. Adaptation aux écrans ------------------------------------------ */
/* Le statut ouvert / fermé ne tient pas dans la capsule à côté du choix clair / sombre (la
   capsule plafonne à 1 280 px) : il reste affiché dans le bloc contact et les encarts. */
.entete-actions .statut { display: none; }
@media (max-width: 1320px) {
  .entete-rangee { gap: 12px; padding-left: 22px; }
  .logo img { height: 22px; }
  .wp-block-navigation.nav:not(:has(.is-menu-open)) .wp-block-navigation__container { gap: 0; }
  .wp-block-navigation.nav .wp-block-navigation-item__content { padding: 10px 13px; font-size: 17px; }
}
/* Sous 1 180 px, les cinq liens ne tiennent plus dans la capsule : menu burger.
   (Le bloc navigation ne bascule de lui-même qu'à 600 px.) */
@media (max-width: 1180px) {
  .entete-rangee { height: 64px; padding: 0 8px 0 20px; }
  .wp-block-navigation.nav { order: 3; margin-inline: 0; }
  .wp-block-navigation.nav .wp-block-navigation__responsive-container-open { display: flex !important; }
  .wp-block-navigation.nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}
@media (max-width: 1180px) {
  .cartes-services, .cartes-avis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartes-services > *,
  .cartes-services > :nth-last-child(2):nth-child(3n + 1),
  .cartes-services > :nth-last-child(2):nth-child(3n + 1) ~ * { grid-column: auto; }
  .cartes-services > :last-child:nth-child(odd) { grid-column: 1 / -1; }   /* carte seule en fin de grille : pleine largeur */
  .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .atouts > li:nth-child(3) { padding-left: 0; border-left: 0; }
  .liste-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .liste-chiffres > li:nth-child(3) { border-left: 0; }
}

@media (max-width: 980px) {
  .hero > .enveloppe { grid-template-columns: minmax(0, 1fr); }
  .hero { background: radial-gradient(ellipse 80% 30% at 70% 82%, rgb(251 1 1 / .13), transparent 72%); }
  .hero-visuel { margin-right: calc(-1 * var(--gouttiere)); }
  :is(figure, div).hero-image img { width: 100%; margin-left: 0; }

  .grille-pannes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panne, .panne:nth-child(-n + 2) { grid-column: span 1; min-height: 0; }
  .grille-pannes > .panne:first-child { grid-column: span 2; }
  .panne::after { margin-top: 18px; }

  .frise { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .frise::before { top: 34px; bottom: 34px; left: 33px; right: auto; width: 2px; height: auto; }
  .frise > li { grid-template-columns: 68px minmax(0, 1fr); column-gap: 20px; row-gap: 4px; }
  .frise > li::before { grid-row: span 2; margin-bottom: 0; }

  .bloc-mobile { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }

  .bloc-double, .bloc-double.inverse { grid-template-columns: minmax(0, 1fr); }
  .bloc-double.inverse :is(figure, div).bloc-double-photo { order: 0; }
  :is(figure, div).bloc-double-photo { min-height: clamp(220px, 50vw, 360px); }
  :is(figure, div).bloc-double-photo::after,
  .bloc-double.inverse :is(figure, div).bloc-double-photo::after { top: auto; right: auto; bottom: -34px; left: 24px; margin-top: 0; }
  .bloc-double-texte { padding: 56px 28px 36px; }

  .appel .actions { flex-wrap: wrap; }
  .page-formulaire > .enveloppe { grid-template-columns: minmax(0, 1fr); }
  .aside-noir { position: static; }
  .bloc-contact { grid-template-columns: minmax(0, 1fr); }
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-marque { grid-column: 1 / -1; }
  .bandeau { flex-direction: column; align-items: flex-start; padding: 30px; }
}

@media (max-width: 640px) {
  /* Barre fixe en bas de l'écran : appeler ou réserver sans remonter la page. */
  /* Pilule noire flottante, comme l'en-tête. */
  .barre-mobile {
    position: fixed; left: var(--gouttiere); right: var(--gouttiere); bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 60;
    display: block;
    padding: 5px;
    border: 1px solid rgb(255 255 255 / .08); border-radius: 999px;
    background: var(--verre);   /* noir fumé : on devine la page derrière */
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / .5);
  }
  .barre-mobile .wp-block-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .barre-mobile .wp-block-button, .barre-mobile .wp-block-button .wp-block-button__link { width: 100%; }
  .barre-mobile .wp-block-button .wp-block-button__link { min-height: 42px; padding: 0 10px; font-size: 17px; box-shadow: none; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }   /* 8 px de marge + 54 px de barre + 10 px d'air */
  .entete-site { padding-top: 8px; }
  /* En-tête et barre du bas compactes, de même hauteur (54 px), à 8 px du bord et sur la
     même gouttière : les deux capsules se répondent. */
  .entete-rangee { height: 54px; gap: 10px; padding: 0 6px 0 18px; }
  .logo img { height: 18px; }
  .wp-block-navigation.nav .wp-block-navigation__responsive-container-open { width: 42px; height: 42px; }
  /* Carte du menu : 8 px de marge + 54 px de capsule + 10 px d'écart ; elle s'arrête au-dessus de la barre du bas. */
  .wp-block-navigation.nav .wp-block-navigation__responsive-container.is-menu-open {
    inset: calc(var(--wp-admin--admin-bar--height, 0px) + 72px) var(--gouttiere) auto auto !important;
    max-height: calc(100dvh - 144px - env(safe-area-inset-bottom) - var(--wp-admin--admin-bar--height, 0px));
    padding: 8px !important; border-radius: 24px;
  }
  .wp-block-navigation.nav .is-menu-open .wp-block-navigation-item__content { padding: 11px 18px; font-size: 18px; }
  .bascule-menu { padding: 12px 6px 2px 18px; }
  .bascule-menu::before { font-size: 16px; }
  .bascule-menu .bascule-theme > p { height: 34px; padding: 0 14px; font-size: 16px; }
  html { scroll-padding-top: 80px; }
  .pied > .enveloppe { border-radius: 28px; }
  .pied-bas { border-radius: 24px; padding: 14px 8px 8px 20px; }
  .pied-legal { margin-left: -16px; }
  /* Le bandeau se pose au-dessus de la barre Appeler / Prendre RDV. */
  .bandeau-cookies {
    left: var(--gouttiere); right: var(--gouttiere); width: auto;
    bottom: calc(72px + env(safe-area-inset-bottom)); padding: 20px;
  }
  /* Déjà dans la barre du bas. Double classe : la règle de mise en page de WordPress
     (body .is-layout-flex, spécificité 0,1,1) l'emporterait sur une classe seule. */
  .entete-actions .entete-rdv { display: none; }
  .entete-actions .bascule-theme { display: none; }   /* manque de place : le choix est dans la carte du menu */

  .hero-actions .wp-block-button { flex: 1 1 100%; }
  .hero-actions .wp-block-button .wp-block-button__link { width: 100%; }
  .atouts > li { padding-left: 0; border-left: 0; }

  /* Carrousels : on fait glisser les cartes du pouce au lieu de les empiler. */
  .carrousel {
    display: grid; grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 84%;
    gap: 14px;
    margin-inline: calc(-1 * var(--gouttiere));
    padding: 6px var(--gouttiere) 18px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
  }
  .carrousel::-webkit-scrollbar { display: none; }
  .carrousel > * { scroll-snap-align: start; }
  .cartes-services.carrousel > :last-child:nth-child(odd) { grid-column: auto; }
  .carrousel > .panne,
  .carrousel > .panne:nth-child(-n + 2),
  .grille-pannes.carrousel > .panne:first-child { grid-column: auto; min-height: 320px; }
  .cartes-avis.carrousel { margin-top: 48px; padding-top: 40px; }
  .panne { padding: 28px; }

  .liste-zones { column-gap: 16px; }
  .liste-zones > li { gap: 10px; font-size: 16px; }
  .liste-zones strong { font-size: 26px; }
  .liste-zones em { display: none; }

  .coordonnee, .aside-noir .coordonnee { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .coordonnee:has(> .copier) { grid-template-columns: auto minmax(0, 1fr); }
  .coordonnee:has(> .copier) > .coordonnee-libelle { grid-column: 1 / -1; }
  .pied-grille { grid-template-columns: minmax(0, 1fr); }

  .liste-coches, .champs-duo, .choix-large .wpcf7-radio { grid-template-columns: minmax(0, 1fr); }
  .formulaire-envoi .bouton-envoi { flex: 1 1 100%; }
  .texte-legal-corps { padding: 28px 20px; }
}

/* --- 20. Animations ----------------------------------------------------- */
/* Seulement l'opacité et le déplacement, une seule fois par élément,
   et aucune si le visiteur a demandé à réduire les animations. */
.cascade > :nth-child(2) { --i: 1; }
.cascade > :nth-child(3) { --i: 2; }
.cascade > :nth-child(4) { --i: 3; }
.cascade > :nth-child(5) { --i: 4; }
.cascade > :nth-child(6) { --i: 5; }

@media (prefers-reduced-motion: no-preference) {
  /* Entrée de l'accueil au chargement, en CSS pur. */
  .entree { animation: entree .9s var(--courbe) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
  .hero-texte { --i: 1; }
  .hero-actions { --i: 2; }
  .note-avis { --i: 3; }
  .atouts { --i: 4; }
  /* Le titre et l'image ne passent jamais par une opacité nulle (indicateur LCP). */
  .hero-titre.entree, .titre-geant.entree { animation-name: entree-sans-fondu; }
  :is(figure, div).hero-image.entree { animation: none; }
  :is(figure, div).hero-image.entree img { animation: zoom-photo 1.6s var(--courbe) backwards; }

  /* Apparition au défilement : app.js pose .en-attente, puis .est-visible. */
  .en-attente { opacity: 0; transform: translateY(36px); }
  .en-attente.est-visible {
    opacity: 1; transform: none;
    transition: opacity .8s var(--courbe), transform .8s var(--courbe);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
}

@keyframes entree { from { opacity: 0; transform: translateY(28px); } }
@keyframes entree-sans-fondu { from { transform: translateY(28px); } }
@keyframes zoom-photo { from { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Plus aucun mouvement, mais les changements de couleur au survol restent visibles. */
  *, *::before, *::after { animation: none !important; transition-property: color, background-color, border-color, opacity !important; }
}

/* --- 21. Mode sombre : ajustements de composants ----------------------- */
/* Placés en dernier : à spécificité égale, ils l'emportent sur les règles claires. */
@media (prefers-color-scheme: dark) {
  /* Photos sur fond blanc : légèrement atténuées pour ne pas éblouir dans le noir. */
  :root:not([data-theme="light"]) :is(.wp-block-image img, img.e-image-base) { filter: brightness(.9); }

  /* La photo du hero se fondait dans la page claire par « multiplication » du blanc.
     Sur du noir, ce calcul l'assombrirait entièrement : elle devient une vitrine éclairée,
     arrondie du côté du texte et collée au bord droit de l'écran. */
  :root:not([data-theme="light"]) :is(figure, div).hero-image img {
    width: 100%; margin-left: 0;
    border-radius: var(--rayon) 0 0 var(--rayon);
    mix-blend-mode: normal;
    -webkit-mask-image: none; mask-image: none;
  }
}
/* Photos sur fond blanc : légèrement atténuées pour ne pas éblouir dans le noir. */
:root[data-theme="dark"] :is(.wp-block-image img, img.e-image-base) { filter: brightness(.9); }

/* La photo du hero se fondait dans la page claire par « multiplication » du blanc.
   Sur du noir, ce calcul l'assombrirait entièrement : elle devient une vitrine éclairée,
   arrondie du côté du texte et collée au bord droit de l'écran. */
:root[data-theme="dark"] :is(figure, div).hero-image img {
  width: 100%; margin-left: 0;
  border-radius: var(--rayon) 0 0 var(--rayon);
  mix-blend-mode: normal;
  -webkit-mask-image: none; mask-image: none;
}