/* ==========================================================================
   Mecaculture — feuille de style du site
   Mobile d'abord : les règles de base visent le téléphone, les @media
   (min-width) ajoutent la mise en page tablette puis desktop.
   Référence visuelle : docs/maquette-accueil-piste-c.html (desktop 1440 px).
   ========================================================================== */

/* ---------- 0. Polices ----------
   Roboto et Roboto Condensed (licence Apache 2.0), auto-hébergées : aucun appel à Google Fonts,
   donc aucune adresse IP transmise avant le consentement (RGPD). Ce sont les fichiers variables,
   sous-ensemble latin, que Google servait : un fichier par famille, une déclaration par graisse,
   exactement comme leur feuille, pour un rendu identique. Préchargés dans base.html.twig. */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-latin-EEph2sr.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/roboto-latin-EEph2sr.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-latin-EEph2sr.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/roboto-condensed-latin-M7axgEy.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-condensed-latin-M7axgEy.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/roboto-condensed-latin-M7axgEy.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 1. Tokens ---------- */
:root {
    /* Couleurs du brief */
    --green: #1F5A36;       /* boutons principaux, liens */
    --green-dark: #17472A;  /* survol des boutons verts */
    --sun: #E3B23C;         /* accent : toujours avec du texte foncé */
    --sun-hover: #EDC25A;
    --sun-soft: #F6E7BF;
    --sun-ink: #6B4E00;     /* texte sur --sun-soft */
    --ink: #16201A;         /* texte, sections sombres, pied de page */
    --ink-2: #243329;       /* cartes posées sur --ink */
    --ink-3: #33473A;
    --ink-line: #4A5C4F;
    --hero: #22392A;
    --bg: #F3F5EF;          /* fond de page */
    --surface: #FFFFFF;
    --rouge: #C3172D;       /* rouge Kress (relevé sur le logo officiel) : bouton Location du héros, demande du client du 12/10/2026 ; texte blanc, contraste 6:1 */
    --rouge-hover: #A3101F;
    --sage: #DCE6D3;        /* tuiles de services, badges « Disponible » */
    --sage-2: #DCE3D6;      /* emplacements photo */
    --muted: #56615A;       /* texte secondaire */
    --text-2: #3C4A40;
    --line: #D5DDCF;
    --on-dark: #DDE7DB;
    --on-dark-2: #C3CFC3;

    /* Disponibilité (location) : toujours accompagnée d'un texte, jamais la couleur seule */
    /* « Disponible » : 5,2:1 sur son fond (#2E7D46 ne faisait que 4,35:1, sous l'AA ; critique du 14/10/2026) */
    --dispo: #27703E;   --dispo-bg: #E3F1E6;
    --reserve: #8A5A00; --reserve-bg: #F6E7BF;
    --indispo: #B3261E; --indispo-bg: #FBE9E7;

    /* Typographie */
    /* Comme husqvarna.com : Roboto pour le texte. Leur police de titres est propriétaire,
       Roboto Condensed en gras en est l'équivalent libre le plus proche. */
    --font-titre: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
    --font-texte: 'Roboto', Arial, system-ui, sans-serif;

    /* Espacements : la gouttière grandit avec l'écran (16 px mobile → 88 px desktop) */
    --gouttiere: clamp(16px, 5.5vw, 88px);
    --section: clamp(56px, 8vw, 96px);
    --rayon-s: 12px;
    --rayon-m: 20px;
    --rayon-l: 24px;

    --ombre-carte: 0 18px 50px rgba(22, 32, 26, 0.14);
    --ombre-douce: 0 6px 20px rgba(22, 32, 26, 0.08);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-texte);
    font-size: 1.0625rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--font-titre); text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
.ico { flex-shrink: 0; }

a { color: var(--green); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

::selection { background: var(--sun); color: var(--ink); }

/* L'anneau de focus, en deux tons (critique Impeccable du 14/10/2026 : le soleil seul ne faisait que 1,8:1 sur le fond
   clair, l'anneau était invisible sur la plupart des sections) : un filet encre contre l'élément, puis le soleil autour.
   L'encre tranche sur les fonds clairs (15:1), le soleil sur les fonds foncés et les photos (8,5:1 sur l'encre). Le filet
   a la largeur du décalage : les deux tons se touchent. Les règles particulières plus bas suivent le même principe. */
:focus-visible {
    outline: 3px solid var(--sun);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--ink);
    border-radius: 6px;
}

input, select, textarea, button { font: inherit; color: inherit; }
input, textarea { caret-color: var(--green); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}

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

.evitement {
    position: absolute; left: 16px; top: -100px; z-index: 100;
    padding: 12px 18px; border-radius: var(--rayon-s);
    background: var(--sun); color: var(--ink); font-weight: 700; text-decoration: none;
}
.evitement:focus { top: 16px; }

/* ---------- 3. Mise en page ---------- */
.conteneur {
    width: 100%;
    max-width: calc(1344px + 2 * var(--gouttiere)); /* 1264 px à l'origine, élargi de 6 % le 9 octobre 2026 */
    margin-inline: auto;
    padding-inline: var(--gouttiere);
}
.conteneur--etroit { max-width: calc(1170px + 2 * var(--gouttiere)); }
.conteneur--lecture { max-width: calc(1040px + 2 * var(--gouttiere)); }

.section { padding-block: var(--section); }
.section--serree { padding-block: calc(var(--section) * 0.5); }
.section--haut-serre { padding-top: 32px; }
/* Une section qui s'enchaîne avec la suivante (le guide d'achat puis la gamme, page Robots) : la suivante donne l'espace. */
.section--enchainee { padding-bottom: 0; }
/* Plus de grande section de couleur (le vert sauge en bandeau « dénotait », 10 octobre 2026) : le sauge ne sert plus
   qu'aux petits éléments (tuile du guide d'achat, badges). La classe reste disponible pour un essai. */
.section--sauge { background: var(--sage); color: var(--ink); }
.section--claire { background: var(--surface); }

.titre-section {
    font-size: clamp(2.125rem, 4.4vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.05;
}
.titre-section--moyen { font-size: clamp(1.625rem, 3vw, 2.25rem); }
.sous-titre-section { max-width: 62ch; margin-top: 8px; color: var(--muted); }

.entete-section {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
    gap: 16px 40px;
    margin-bottom: clamp(28px, 4vw, 40px);
}
.section > .conteneur > .titre-section { margin-bottom: clamp(28px, 4vw, 40px); }

/* ---------- 4. Composants de base ---------- */

/* Boutons : au moins 48 px de haut, cible tactile confortable */
.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px;
    padding: 12px 22px;
    border: 2px solid transparent;
    border-radius: var(--rayon-s);
    font-size: 1rem; font-weight: 700; line-height: 1.2;
    text-decoration: none; text-align: center;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.bouton:active { transform: translateY(1px); }
.bouton--grand { min-height: 58px; padding: 16px 28px; font-size: 1.0625rem; border-radius: 14px; }
.bouton--petit { min-height: 44px; padding: 8px 16px; font-size: 0.9375rem; }

.bouton--soleil { background: var(--sun); color: var(--ink); }
.bouton--soleil:hover { background: var(--sun-hover); color: var(--ink); }
.bouton--vert { background: var(--green); color: #FFFFFF; }
.bouton--vert:hover { background: var(--green-dark); color: #FFFFFF; }
.bouton--blanc { background: #FFFFFF; color: var(--ink); }
.bouton--blanc:hover { background: var(--sun); color: var(--ink); }
.bouton--contour { border-color: var(--line); color: var(--ink); background: transparent; font-weight: 600; }
.bouton--contour:hover { border-color: var(--green); color: var(--green); }
.bouton--rouge { background: var(--rouge); color: #FFFFFF; }
.bouton--rouge:hover { background: var(--rouge-hover); color: #FFFFFF; }
.bouton--contour-clair { border-color: rgba(255, 255, 255, 0.6); color: #FFFFFF; font-weight: 600; }
.bouton--contour-clair:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.1); color: #FFFFFF; }

.lien-fleche {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px;
    font-weight: 700; color: var(--green); text-decoration: none;
}
.lien-fleche .ico:last-child { transition: transform 0.25s var(--ease); }
.lien-fleche:hover .ico:last-child, a:hover > .lien-fleche .ico:last-child { transform: translateX(4px); }
.lien-fleche--clair { color: #FFFFFF; }
.lien-fleche--clair:hover { color: var(--sun); }

.pastille {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.8125rem; font-weight: 700; line-height: 1.3;
}
.pastille--soleil { background: var(--sun); color: var(--ink); }
.pastille--soleil-doux { background: var(--sun-soft); color: var(--sun-ink); }
.pastille--sauge { background: var(--sage); color: var(--green); }
.pastille--dispo { background: var(--dispo-bg); color: var(--dispo); }
.pastille--reserve { background: var(--reserve-bg); color: var(--reserve); }
.pastille--indispo { background: var(--indispo-bg); color: var(--indispo); }

/* Emplacement photo en attente du client */
.photo-attente {
    position: relative;
    display: flex; align-items: flex-end; justify-content: flex-start;
    background:
        radial-gradient(120% 90% at 20% 110%, rgba(31, 90, 54, 0.16), transparent 60%),
        linear-gradient(160deg, #E4EADF, var(--sage-2));
    color: var(--muted);
    overflow: hidden;
}
.photo-attente__legende {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 14px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.8125rem; font-weight: 600; line-height: 1.3;
}

.coches { list-style: none; padding: 0; display: grid; gap: 12px; }
.coches li { display: flex; gap: 12px; align-items: flex-start; }
.coches .ico { color: var(--green); margin-top: 2px; }

.mention-demo {
    padding-block: 24px;
    color: var(--muted); font-size: 0.875rem; font-style: italic;
}

/* Champs de formulaire */
.champ { display: grid; gap: 6px; }
.champ__label { font-size: 0.9375rem; font-weight: 600; }
.champ__facultatif { font-weight: 400; color: var(--muted); }
.champ__aide { font-size: 0.875rem; color: var(--muted); }
/* Le piège à robots : hors écran, mais présent dans le formulaire */
.piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.champ__saisie {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 2px solid var(--line);
    border-radius: var(--rayon-s);
    background: #F8FAF6;
    font-size: 1rem;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.champ__saisie::placeholder { color: #6E7A72; }
.champ__saisie:hover { border-color: #B9C5B3; }
.champ__saisie:focus { outline: none; border-color: var(--green); background: #FFFFFF; box-shadow: 0 0 0 4px rgba(31, 90, 54, 0.14); }
.champ__saisie--erreur, .champ__saisie--erreur:hover { border-color: #B3261E; background: #FFF8F7; }
textarea.champ__saisie { resize: vertical; min-height: 120px; }
select.champ__saisie {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2316201A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    padding-right: 44px;
}
.champ__erreur {
    display: flex; gap: 10px; align-items: flex-start;
    color: #8C1D18; font-size: 0.9375rem;
}
.champ__erreur[hidden] { display: none; }
.champ__erreur .ico { margin-top: 2px; }
.champ__erreur a { color: inherit; font-weight: 700; }
/* Le compteur de caractères sous un message (contrôleur « formulaire ») */
.champ__compteur { text-align: right; font-variant-numeric: tabular-nums; }
.champ__compteur--limite { color: #8C1D18; font-weight: 600; }
/* L'anti-robot (ALTCHA) : la case « Je ne suis pas un robot », dessinée comme les champs du formulaire */
.anti-robot altcha-widget {
    --altcha-border-width: 2px;
    --altcha-border-color: var(--line);
    --altcha-border-radius: var(--rayon-s);
    --altcha-color-base: #F8FAF6;
    --altcha-color-base-content: var(--ink);
    --altcha-color-primary: var(--green);
    --altcha-color-primary-content: #FFFFFF;
    --altcha-color-success: var(--green);
    --altcha-color-error: #B3261E;
    --altcha-max-width: 100%;
    display: block;
}

/* ---------- 5. En-tête ---------- */
/* Transparent sur toutes les pages : il flotte au-dessus du haut de page, qui remonte derrière lui (photo du héros,
   bandeau photo ou bandeau foncé). Chaque haut de page réserve donc --entete-h en plus de son propre espace.
   Un voile dégradé, du haut vers le bas, garde le menu lisible sur les zones claires des photos. */
:root { --entete-h: 80px; }
@media (min-width: 1080px) { :root { --entete-h: 104px; } }
.entete { position: absolute; top: 0; left: 0; right: 0; z-index: 10; color: #FFFFFF; }
.entete::before {
    content: ''; position: absolute; z-index: -1; inset: 0 0 auto; height: calc(var(--entete-h) + 56px);
    background: linear-gradient(180deg, rgba(14, 22, 17, 0.55) 0%, rgba(14, 22, 17, 0.22) 60%, rgba(14, 22, 17, 0) 100%);
    pointer-events: none;
}

.entete__barre {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    max-width: calc(1392px + 2 * var(--gouttiere));
    min-height: var(--entete-h);
    margin-inline: auto;
    padding: 0 var(--gouttiere);
}

.marque { display: flex; align-items: center; flex-shrink: 0; color: #FFFFFF; text-decoration: none; }
.marque:hover { color: #FFFFFF; }
/* Le logo de l'atelier, version fond sombre (720 × 168 px, affiché en 2x à 3x) */
/* Sur téléphone, un peu plus haut que le bouton du menu (David, 13/10/2026), sauf sur les plus petits écrans où il
   garde sa hauteur (48 px) pour laisser de l'air ; sur ordinateur, voir les paliers plus bas */
.marque__logo { display: block; width: auto; height: 54px; }
/* À côté des deux boutons (Appeler, Menu ; 14/10/2026), le logo garde ses 54 px de haut tant qu'il a la place, puis
   rétrécit avec l'écran plutôt que de pousser la barre hors de la page (environ 51 px de haut à 375 px de large) */
@media (max-width: 1079px) {
    .marque { flex: 0 1 auto; min-width: 0; }
    .marque__logo { width: calc(54px * 720 / 168); max-width: 100%; height: auto; }
}
@media (max-width: 359px) { .marque__logo { width: calc(48px * 720 / 168); } }

.entete__bouton-menu {
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border: 2px solid rgba(255, 255, 255, 0.35); border-radius: var(--rayon-s);
    background: transparent; color: #FFFFFF; cursor: pointer;
}
/* Sur téléphone : Appeler (plein, soleil : l'action principale) puis Menu (contour), de la même taille */
.entete__raccourcis { display: flex; flex-shrink: 0; gap: 8px; }
.entete__appel {
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border-radius: var(--rayon-s);
    background: var(--sun); color: var(--ink);
}
.entete__appel:hover { background: var(--sun-hover); color: var(--ink); }
@media (max-width: 1079px) { .entete__barre { gap: 12px; } }

/* Mobile : le menu est un panneau qui se déplie sous la barre */
.entete__menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 8px var(--gouttiere) 24px;
    background: var(--ink);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.25);
}
.entete[data-ouvert="true"] .entete__menu { display: grid; gap: 20px; }
.entete[data-ouvert="true"] { background: var(--ink); }

/* Une seule colonne, à la largeur de l'écran : les cartes d'un panneau déplié défilent en largeur sans élargir la page */
.nav { display: grid; grid-template-columns: minmax(0, 1fr); }
.nav a {
    display: flex; align-items: center;
    min-height: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #FFFFFF; font-size: 1.0625rem; font-weight: 500; text-decoration: none;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--sun); }
.entete__actions { display: grid; gap: 10px; }
.entete__suivi-court { display: none; }
@media (min-width: 1440px) and (max-width: 1599px) {
    .entete__suivi-long { display: none; }
    .entete__suivi-court { display: inline; }
}

@media (min-width: 1080px) {
    .entete__raccourcis { display: none; }
    .entete__menu,
    .entete[data-ouvert="true"] .entete__menu {
        position: static; display: flex; align-items: center; gap: 32px;
        padding: 0; background: none; box-shadow: none;
    }
    .entete[data-ouvert="true"] { background: transparent; }
    .nav { display: flex; gap: 28px; }
    .nav a { min-height: 44px; border: 0; font-size: 1.0625rem; font-weight: 500; }
    .nav a[aria-current="page"] { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: 8px; }
    .entete__actions { display: flex; gap: 12px; }
    .entete__actions .bouton { font-size: 0.9375rem; }
    .marque__logo { height: 68px; }
}

/* Méga-menu : sous la barre, un panneau de cartes par entrée (Location, Robots de tonte, Conseils).
   Chaque entrée est un lien vers sa page, avec à côté un petit bouton chevron qui ouvre le panneau.
   Mobile d'abord : dans le menu replié, l'entrée est un accordéon et les cartes défilent à l'horizontale. */
.nav__item { display: contents; }
.nav__ligne { display: flex; align-items: stretch; border-bottom: 1px solid var(--ink-3); }
.nav .nav__lien { flex: 1; border-bottom: 0; }
.nav__bouton {
    display: grid; place-items: center; flex-shrink: 0;
    width: 48px; min-height: 48px; padding: 0;
    border: 0; background: none; color: #FFFFFF; cursor: pointer;
}
.nav__bouton .ico { transition: transform 0.2s var(--ease); }
.nav__bouton[aria-expanded="true"] .ico { transform: rotate(180deg); }
.megamenu[hidden] { display: none; }
.megamenu { padding: 10px 0 14px; }
.megamenu__texte { display: none; }
.megamenu__cartes {
    list-style: none; margin: 0; padding: 4px 0 8px;
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.megamenu__cartes::-webkit-scrollbar { display: none; }
.megamenu__cartes > li { flex: 0 0 220px; scroll-snap-align: start; }

/* La carte du menu : photo plein cadre (ou fond vert sombre), titre en bas */
.carte-menu {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; justify-content: flex-end;
    aspect-ratio: 4 / 3;
    border-radius: 14px; overflow: hidden;
    background: radial-gradient(70% 90% at 80% 15%, #3F6A48 0%, transparent 70%), var(--ink-2);
    color: #FFFFFF; text-decoration: none;
}
.carte-menu:hover { color: #FFFFFF; }
.carte-menu__visuel { position: absolute; inset: 0; z-index: -1; }
.carte-menu__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.carte-menu__visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 16, 12, 0.86) 0%, rgba(10, 16, 12, 0.3) 55%, transparent 80%); }
.carte-menu__pastille { position: absolute; top: 10px; right: 10px; }
.carte-menu__corps { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.carte-menu__cat { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sun); }
.carte-menu__titre { font-family: var(--font-titre); font-size: 1.0625rem; font-weight: 700; line-height: 1.15; }
.carte-menu__sous { font-size: 0.8125rem; color: var(--on-dark-2); }
@media (hover: hover) and (pointer: fine) {
    .carte-menu:hover .carte-menu__visuel img { transform: scale(1.05); }
}
/* Le voile sous le panneau : dans le contexte d'empilement de l'en-tête, derrière ses propres enfants */
.megamenu-voile { display: none; }

@media (min-width: 1080px) {
    .nav { align-items: center; }
    /* Toutes les entrées de la barre ont la même hauteur cliquable (44 px) et la même ligne : le lien et son chevron
       forment un groupe centré, de la hauteur des entrées sans chevron (le chevron ne touche pas au texte). */
    .nav__item { display: flex; align-items: center; flex-shrink: 0; }
    .nav__ligne { display: inline-flex; align-items: center; height: 44px; border: 0; }
    .nav .nav__lien { flex: none; }
    /* Le chevron colle au lien : 36 px de large à la souris, 44 px au doigt (cible tactile) */
    .nav__bouton { width: 36px; height: 44px; min-height: 0; margin-right: -8px; }
    .nav__bouton:hover, .nav__item--ouvert .nav__bouton, .nav__item--ouvert .nav__lien { color: var(--sun); }
    @media (pointer: coarse) { .nav__bouton { width: 44px; } }
    .megamenu {
        position: absolute; left: 0; right: 0; top: 100%;
        padding: 0;
        background: var(--surface); color: var(--ink);
        border-top: 1px solid var(--line);
        box-shadow: 0 30px 60px rgba(22, 32, 26, 0.22);
        /* Il descend et se révèle : 220 ms, départ vif et fin douce (--ease), opacity et transform seulement */
        opacity: 0; transform: translateY(-10px);
        transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
    }
    .megamenu--ouvert { opacity: 1; transform: none; }
    /* La sortie est plus rapide : 140 ms, un fondu et 4 px de recul. Le panneau reste affiché (le contrôleur ne
       le cache qu'après) mais ne reçoit plus de clics pendant le fondu. */
    .megamenu--fermeture { opacity: 0; transform: translateY(-4px); transition-duration: 0.14s; pointer-events: none; }
    .megamenu--instant { transition: none; }
    .megamenu__interieur {
        display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 40px;
        max-width: calc(1264px + 2 * var(--gouttiere));
        margin-inline: auto;
        padding: 32px var(--gouttiere) 36px;
    }
    .megamenu__texte { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
    .megamenu__titre { font-family: var(--font-titre); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
    .megamenu__intro { color: var(--muted); }
    .megamenu__cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; overflow: visible; }
    .megamenu__cartes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Boutique : toutes les catégories sur une ligne, autant de colonnes qu'il y en a (5 à 6 aujourd'hui) */
    .megamenu__cartes--categories { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .megamenu__cartes > li { flex: none; display: grid; }
    /* Les quatre panneaux au même niveau (David, 12/10/2026) : chaque carte a la même hauteur fixe, quelle que soit la
       largeur de sa colonne (3, 4 ou 6 par ligne). Une carte produit garde son texte entier : c'est sa photo qui cède
       la place quand un nom tient sur trois lignes. */
    .megamenu .carte-menu { height: 200px; aspect-ratio: auto; }
    .megamenu .carte-menu--produit .carte-menu__visuel { flex: 1; min-height: 0; aspect-ratio: auto; }
    .megamenu-voile { display: block; position: fixed; inset: 0; z-index: -1; background: rgba(22, 32, 26, 0.3); }
    .megamenu-voile[hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .megamenu, .megamenu--fermeture { transition: none; transform: none; }
    .nav__bouton .ico { transition: none; }
}

/* La barre d'en-tête garde ses entrées sur une seule ligne, toutes à la même hauteur. Les chevrons et la septième
   entrée (Partenaires, 13/10/2026) lui ajoutent de la largeur : de 1080 à 1359 px on resserre les espaces et on réduit
   le logo, sous 1440 px le téléphone ne garde que son icône (de 1440 à 1599 px, « Suivre ma réparation » devient
   « Mon suivi » pour laisser la place au numéro : critique Impeccable du 14/10/2026) (le numéro reste lu par les lecteurs d'écran), et sous
   1200 px « Robots de tonte » devient « Robots » à l'écran, avec un menu un peu plus petit. */
@media (min-width: 1080px) {
    .nav > a, .nav__lien, .entete__actions .bouton { white-space: nowrap; }
    /* Le logo un peu plus près du bord (David, 13/10/2026 : « plus harmonieux »), les boutons d'autant à droite */
    .entete__barre { padding-inline: max(16px, calc(var(--gouttiere) - 24px)); }
}
/* Sept entrées depuis l'arrivée de Partenaires (13/10/2026) : des espaces un peu plus serrés sur grand écran */
@media (min-width: 1500px) {
    .nav { gap: 12px; }
    .entete__menu, .entete[data-ouvert="true"] .entete__menu { gap: 20px; }
}
@media (min-width: 1360px) and (max-width: 1499px) {
    .marque__logo { height: 60px; }
    .nav { gap: 10px; }
    .entete__menu, .entete[data-ouvert="true"] .entete__menu { gap: 16px; }
}
@media (min-width: 1360px) and (max-width: 1439px) { .marque__logo { height: 56px; } }
@media (min-width: 1080px) and (max-width: 1359px) {
    .marque__logo { height: 48px; }
    .nav { gap: 9px; }
    .entete__menu, .entete[data-ouvert="true"] .entete__menu { gap: 16px; }
    .entete__actions { gap: 8px; }
    .entete__actions .bouton { padding-inline: 14px; }
}
@media (min-width: 1080px) and (max-width: 1439px) {
    .bouton__numero { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 1080px) and (max-width: 1199px) {
    .marque__logo { height: 40px; }
    .nav { gap: 6px; }
    .nav a { font-size: 0.9375rem; }
    .nav__complement { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Le panneau « Robots de tonte » : le guide d'achat d'abord (vert sauge, texte), puis les robots mis en avant
   (photo détourée sur fond blanc, nom, prix public). Mêmes cartes que Location, sans le dégradé sombre.
   Les sélecteurs commencent par .megamenu : les cartes sont des liens de .nav, dont `.nav a` est plus fort. */
.megamenu__cartes--robots > li { display: grid; }
.megamenu .carte-menu--guide, .megamenu .carte-menu--produit { align-items: stretch; justify-content: flex-start; min-height: 0; aspect-ratio: auto; }
.megamenu .carte-menu--guide { background: var(--sage); color: var(--ink); border: 0; }
.megamenu .carte-menu--guide:hover { color: var(--ink); }
.carte-menu--guide .carte-menu__corps { flex: 1; gap: 8px; padding: 16px; }
.carte-menu--guide .carte-menu__titre { font-size: 1.1875rem; line-height: 1.12; }
.carte-menu--guide .carte-menu__sous { color: var(--text-2); }
.carte-menu__action { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 0.875rem; font-weight: 700; color: var(--green); }
.carte-menu__action .ico { transition: transform 0.25s var(--ease); }
.megamenu .carte-menu--produit { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.megamenu .carte-menu--produit:hover { color: var(--ink); }
.carte-menu--produit .carte-menu__visuel { position: relative; inset: auto; z-index: auto; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 10px; background: #FFFFFF; }
.carte-menu--produit .carte-menu__visuel::after { display: none; }
/* L'image posée en absolu dans le cadre 4:3 : en grille, un max-height en % ne se résout pas et une photo haute
   (souffleur dorsal) dépassait du cadre */
.carte-menu--produit .carte-menu__visuel img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; }
.carte-menu--produit .carte-menu__corps { padding: 0 14px 14px; }
.carte-menu--produit .carte-menu__sous { color: var(--muted); }
.carte-menu__prix { font-family: var(--font-titre); font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
    .carte-menu--guide:hover .carte-menu__action .ico { transform: translateX(4px); }
}
@media (min-width: 1080px) {
    /* Le guide d'achat, un peu plus large que les trois robots : il porte du texte */
    .megamenu__cartes--robots { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
}
/* Sous 1280 px les colonnes sont étroites : la carte du guide garde son titre et son lien, sans la phrase */
@media (min-width: 1080px) and (max-width: 1279px) {
    .carte-menu--guide .carte-menu__sous { display: none; }
}

/* ---------- 6. Héros (accueil) ---------- */
.heros {
    position: relative;
    display: flex; flex-direction: column;
    min-height: min(800px, 100svh);
    background: var(--hero);
    color: #FFFFFF;
    overflow: hidden;
}
/* La photo du héros, bord à bord, sous un voile sombre dégradé à gauche : le texte reste lisible quelle que soit la photo */
.heros__fond {
    position: absolute; inset: 0;
    background: var(--hero);
}
.heros__photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Le sujet est plutôt à droite : on le garde visible sur les écrans étroits */
    object-position: 68% 50%;
    /* Un zoom très lent sur la photo (effet « Ken Burns ») : 8 % en 24 s, mouvement constant */
    transform-origin: 60% 55%;
    animation: heros-zoom 24s linear both;
    will-change: transform;
}
@keyframes heros-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .heros__photo { animation: none; } }
.heros__fond::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(14, 22, 17, 0.9) 0%, rgba(14, 22, 17, 0.62) 45%, rgba(14, 22, 17, 0.18) 100%);
}
@media (max-width: 719px) {
    /* Sur mobile, le texte couvre toute la photo : voile vertical plus marqué */
    .heros__fond::after { background: linear-gradient(180deg, rgba(14, 22, 17, 0.7) 0%, rgba(14, 22, 17, 0.6) 55%, rgba(14, 22, 17, 0.86) 100%); }
}

.heros__contenu {
    position: relative;
    flex-grow: 1;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 32px;
    width: 100%;
    max-width: calc(1392px + 2 * var(--gouttiere));
    margin-inline: auto;
    padding: calc(var(--entete-h) + 40px) var(--gouttiere) 64px;
}
.heros__texte { display: flex; flex-direction: column; gap: 24px; max-width: 900px; }
.heros__titre {
    font-size: clamp(2.75rem, 7.6vw, 6rem);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -0.01em;
}
.heros__intro { max-width: 40ch; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--on-dark); }
.heros__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.heros__appel { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px; margin-top: -8px; font-size: 1.0625rem; color: var(--on-dark); }
.heros__appel > .ico { flex-shrink: 0; color: var(--sun); }
.heros__numero {
    display: inline-flex; align-items: center; min-height: 44px;
    color: #FFFFFF; font-weight: 700;
    text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.heros__numero:hover { color: var(--sun); }
.heros__actions .bouton { flex: 1 1 220px; }


@media (min-width: 720px) {
    .heros__actions .bouton { flex: 0 0 auto; }
}
@media (min-width: 1080px) {
    .heros__contenu { flex-direction: row; justify-content: space-between; align-items: flex-end; padding-bottom: 96px; }
    .heros__texte { gap: 28px; }
}

/* La bande sous le héros : des tuiles qui défilent toutes seules (machines à louer, robots en vente).
   Pas de carte de fond : le nom, la photo et le prix posés sur la page, dans la largeur du conteneur.
   Au survol, la tuile visée sort franchement de la bande et ses voisines suivent en s'atténuant :
   l'effet « vague » du pen 3D wave animation (HighFlyer910), en version légère. */
/* La bande est sur blanc : sous le héros, elle se détache du fond de page, et l'accueil alterne ensuite blanc et fond pâle */
.bande { padding: 20px 0 0; background: var(--surface); overflow-x: clip; } /* les boutons débordent de 6 px quand le cadre touche les bords */
.bande__entete { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.bande__titre { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bande__cadre { position: relative; }
.bande__piste {
    display: flex; gap: 14px;
    overflow-x: auto; scrollbar-width: none;
    padding: 36px 0 40px;
    /* Les bords s'estompent : on voit qu'il y a une suite, sans coupure nette */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.bande__piste::-webkit-scrollbar { display: none; }
/* Les deux boutons verticaux, discrets, posés dans le flou de chaque bord */
.bande__bord {
    position: absolute; top: 36px; bottom: 40px; z-index: 4;
    display: grid; place-items: center; width: 44px;
    border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.bande__bord--gauche { left: -6px; }
.bande__bord--gauche .ico { transform: rotate(90deg); }
.bande__bord--droite { right: -6px; }
.bande__bord--droite .ico { transform: rotate(-90deg); }
.bande__bord:hover { color: var(--ink); background: rgba(22, 32, 26, 0.06); }
.bande__bord:active { color: var(--green); }
.bande__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-shrink: 0; gap: 14px; width: max-content; }
.bande__item { display: flex; }
.tuile {
    position: relative;
    display: flex; flex-direction: column;
    width: 150px; padding: 0 2px;
    color: var(--ink); text-decoration: none;
    transition: transform 0.6s cubic-bezier(0.1, 0.7, 0, 1);
}
.tuile:hover { color: var(--ink); }
.tuile__entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; min-height: 2.6em; }
.tuile__nom { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.tuile__entete .ico { flex-shrink: 0; margin-top: 1px; color: var(--green); }
.tuile__visuel { display: grid; place-items: center; height: 96px; margin-top: 6px; border-radius: 12px; overflow: hidden; background: var(--sage-2); transition: box-shadow 0.6s cubic-bezier(0.1, 0.7, 0, 1); }
/* Sans photo : l'icône de la catégorie, en vert sur le sauge */
.tuile__visuel--vide { color: var(--green); }
.tuile__visuel img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.6s cubic-bezier(0.1, 0.7, 0, 1); }
/* Les produits (photos détourées) flottent sur la page, sans cadre */
.tuile__visuel--blanc { background: transparent; overflow: visible; }
.tuile__visuel--blanc img { object-fit: contain; }
.tuile__sous { margin-top: 6px; font-size: 0.75rem; color: var(--muted); }
.tuile--tous { flex-direction: row; justify-content: center; align-items: center; gap: 8px; width: 150px; padding: 0 14px; border-radius: var(--rayon-m); background: #E6EBE2; font-size: 0.875rem; font-weight: 700; text-align: center; }
@media (hover: hover) and (pointer: fine) {
    /* La tuile visée grossit d'un tiers et se soulève ; les deux voisines de chaque côté suivent, de moins en moins */
    .bande__item:hover .tuile { transform: scale(1.32) translateY(-10px); z-index: 3; }
    .bande__item:hover .tuile__visuel:not(.tuile__visuel--blanc) { box-shadow: 0 24px 36px -12px rgba(22, 32, 26, 0.5); }
    .bande__item:hover .tuile__visuel--blanc img { filter: drop-shadow(0 22px 18px rgba(22, 32, 26, 0.36)); }
    .bande__item:hover + .bande__item .tuile,
    .bande__item:has(+ .bande__item:hover) .tuile { transform: scale(1.14) translateY(-4px); z-index: 2; }
    .bande__item:hover + .bande__item + .bande__item .tuile,
    .bande__item:has(+ .bande__item + .bande__item:hover) .tuile { transform: scale(1.05); z-index: 1; }
    .bande__item:hover .tuile--tous { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .tuile, .tuile__visuel, .tuile__visuel img { transition: none; }
    .bande__item:hover .tuile, .bande__item:hover + .bande__item .tuile, .bande__item:has(+ .bande__item:hover) .tuile,
    .bande__item:hover + .bande__item + .bande__item .tuile, .bande__item:has(+ .bande__item + .bande__item:hover) .tuile { transform: none; }
}
/* Les tuiles de la bande, fixes, en tête de la page Location : les catégories, qui filtrent les cartes.
   Dès 1024 px elles tiennent sur une ligne, centrées, quitte à rétrécir un peu ; en dessous, elles forment une rangée qu'on fait glisser, estompée à droite. La tuile choisie
   se cerne de vert et prend une coche ; « Toutes les machines » montre trois photos en éventail. */
.filtre-bande .bande__titre { text-align: center; }
.filtre-bande__liste { width: auto; justify-content: safe center; gap: 12px; padding: 20px 0 24px; }
.filtre-bande__liste > .bande__item { flex: 0 1 150px; min-width: 100px; }
.filtre-bande__liste .tuile { width: 100%; }
@media (max-width: 1023px) {
    .filtre-bande__liste {
        overflow-x: auto; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    }
    .filtre-bande__liste::-webkit-scrollbar { display: none; }
    .filtre-bande__liste > .bande__item { flex: 0 0 136px; }
}
@media (max-width: 767px) { .filtre-bande__liste { padding: 14px 0 20px; } }
/* La loupe, plus discrète qu'à l'accueil : ici les tuiles servent à choisir, pas à donner envie. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .filtre-bande__liste .bande__item:hover .tuile { transform: scale(1.1) translateY(-4px); }
    .filtre-bande__liste .bande__item:hover + .bande__item .tuile,
    .filtre-bande__liste .bande__item:has(+ .bande__item:hover) .tuile { transform: scale(1.04); }
    .filtre-bande__liste .bande__item:hover + .bande__item + .bande__item .tuile,
    .filtre-bande__liste .bande__item:has(+ .bande__item + .bande__item:hover) .tuile { transform: none; }
    .filtre-bande__liste .bande__item:hover .tuile__visuel { box-shadow: 0 12px 20px -10px rgba(22, 32, 26, 0.4); }
}
.tuile--filtre .tuile__entete .ico { opacity: 0; transform: scale(0.6); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.tuile--filtre[aria-current="true"] .tuile__entete .ico { opacity: 1; transform: none; }
.tuile--filtre[aria-current="true"] .tuile__nom { font-weight: 700; }
.tuile--filtre[aria-current="true"] .tuile__visuel { outline: 3px solid var(--green); outline-offset: 3px; }
.tuile__visuel--eventail img { grid-area: 1 / 1; width: 56%; height: 72%; border-radius: 8px; box-shadow: 0 6px 14px -6px rgba(22, 32, 26, 0.5); }
.tuile__visuel--eventail img:nth-child(1) { transform: translateX(-36%) rotate(-12deg); }
.tuile__visuel--eventail img:nth-child(2) { transform: translateX(36%) rotate(12deg); }
.tuile__visuel--eventail img:nth-child(3) { transform: translateY(-4%); }

/* ---------- 7. Suivre ma réparation (page Réparation) : le panneau du bandeau, puis « Retrouver votre suivi en 3 gestes » ---------- */

/* Le panneau #suivi : une carte claire, lisible sur la photo sombre du bandeau. Il chevauche le bord bas du bandeau et
   déborde sur la section suivante, BLANCHE (voir .bandeau--suivi, section 13), comme la photo d'un guide : d'où la bordure
   fine --line et l'ombre décalée assez marquée, qui le détachent du blanc. */
/* La carte a deux faces (le formulaire, et l'état d'une réparation une fois trouvée) et un dos, le temps du geste qui la
   retourne (carte_suivi_controller.js) : l'apparence de la carte est donc sur ses faces, pas sur la section, sinon son fond
   blanc se verrait à travers le dos pendant le geste. */
.suivi { position: relative; }
.suivi__face {
    display: grid; gap: 14px; align-content: start;
    padding: 24px 22px 22px;
    border: 1px solid var(--line); border-radius: var(--rayon-m);
    background: var(--surface); color: var(--ink);
    box-shadow: 0 22px 48px -16px rgba(22, 32, 26, 0.34), 0 3px 10px rgba(22, 32, 26, 0.08);
}
.suivi__face[hidden] { display: none; }
.se-retourne > .suivi__face { backface-visibility: hidden; }
.suivi.se-retourne > .dos-carte { border-radius: var(--rayon-m); }
.suivi__titre { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.suivi__aide { font-size: 0.9375rem; color: var(--muted); }
.suivi__form { display: grid; gap: 14px; margin-top: 4px; }
.suivi__saisie { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.suivi__saisie::placeholder { color: #5C675F; } /* 5,6:1 sur le fond du champ : le gris de base n'atteint pas 4,5:1 */
.suivi__saisie--dossier { text-transform: uppercase; }
.suivi__erreur { margin-top: 0; }
.suivi__actions { display: grid; gap: 2px; justify-items: start; }
.suivi__envoi { width: 100%; min-height: 52px; }

/* Le verso : l'état de la réparation, lu chez KronoFix (App\Suivi\EtatReparation). Les cinq étapes en fil horizontal,
   y compris sur téléphone (libellés courts) ; l'étape en cours a un anneau qui respire doucement. */
.suivi__dossier { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.suivi__dossier strong { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.suivi__panne { margin-top: -8px; color: var(--muted); }
.etapes-suivi { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.etapes-suivi__etape { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 0.75rem; font-weight: 600; line-height: 1.2; color: var(--muted); }
/* Le fil vers l'étape précédente, derrière les points : il est tracé par l'étape suivante, donc plus loin dans la page ;
   sans le z-index des points, il passait sur la pastille de l'étape d'avant */
.etapes-suivi__etape + .etapes-suivi__etape::before { content: ''; position: absolute; top: 11px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.etapes-suivi__etape + .etapes-suivi__etape--faite::before, .etapes-suivi__etape + .etapes-suivi__etape--en_cours::before { background: var(--green); }
.etapes-suivi__point { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); color: #FFFFFF; }
.etapes-suivi__etape--faite .etapes-suivi__point { border-color: var(--green); background: var(--green); }
.etapes-suivi__etape--en_cours { color: var(--ink); font-weight: 700; }
.etapes-suivi__etape--en_cours .etapes-suivi__point { border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 16%, transparent); }
.etapes-suivi__etape--en_cours .etapes-suivi__point::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.suivi__face--piece .etapes-suivi__etape--en_cours .etapes-suivi__point { border-color: var(--sun); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 24%, transparent); }
.suivi__face--piece .etapes-suivi__etape--en_cours .etapes-suivi__point::after { background: var(--sun); }
@media (prefers-reduced-motion: no-preference) {
    .etapes-suivi__etape--en_cours .etapes-suivi__point { animation: respire-etape 2.4s ease-in-out infinite; }
}
@keyframes respire-etape { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--green) 8%, transparent); } }
.suivi__statut { padding: 14px 16px; border-radius: var(--rayon-s); background: var(--bg); }
.suivi__statut--prete { background: var(--sage); }
.suivi__statut--piece { background: var(--sun-soft); }
.suivi__libelle { font-size: 1.0625rem; font-weight: 700; }
.suivi__statut--prete .suivi__libelle { color: var(--green); }
.suivi__statut--piece .suivi__libelle { color: var(--sun-ink); }
.suivi__detail { margin-top: 2px; font-size: 0.9375rem; color: var(--text-2); }
.suivi__messages { display: grid; gap: 8px; }
.suivi__messages-titre { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.suivi__message { margin: 0; padding: 10px 12px; border-left: 3px solid var(--green); border-radius: 0 var(--rayon-s) var(--rayon-s) 0; background: var(--bg); font-size: 0.9375rem; }
.suivi__message footer { margin-top: 4px; font-size: 0.8125rem; color: var(--muted); }
.suivi__maj { font-size: 0.8125rem; color: var(--muted); }
.suivi__actions--etat .suivi__envoi { gap: 8px; }
/* Sur téléphone, cinq libellés tiennent sur à peine 300 px : un peu moins de marge dans la carte, des libellés un cran
   plus petits (le « Réparation » en gras de l'étape en cours touchait « Diagnostic » à 375 px) */
@media (max-width: 479px) {
    .suivi__face--etat { padding-inline: 14px; }
    .etapes-suivi__etape { font-size: 0.6875rem; letter-spacing: -0.02em; }
}

/* Retrouver son suivi : le bon à gauche (au-dessus sur mobile), les gestes à droite. Le titre passe avant le bon sur mobile. */
.retrouver { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "titre" "bon" "gestes"; }
.retrouver__entete { grid-area: titre; display: grid; gap: 12px; max-width: 58ch; }
.retrouver__entete p { font-size: 1.0625rem; color: var(--text-2); }
.retrouver__bon { --loupe: 150px; grid-area: bon; position: relative; width: 100%; max-width: 540px; }
.retrouver__gestes { grid-area: gestes; display: grid; gap: 14px; align-content: start; max-width: 620px; }
.retrouver__aide { font-size: 0.9375rem; color: var(--muted); }
.retrouver__aide[hidden] { display: none; }
@media (min-width: 720px) { .retrouver__bon { --loupe: 176px; } }
/* Côte à côte dès 880 px (David, 15/10/2026 : sur tablette, le bon s'étirait seul à gauche, les gestes en dessous) :
   deux moitiés, puis le bon à sa largeur dès 1 080 px */
@media (min-width: 880px) {
    .retrouver {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
        grid-template-areas: "bon titre" "bon gestes";
        column-gap: clamp(40px, 6vw, 88px); align-items: start;
    }
}
@media (min-width: 1080px) {
    .retrouver { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); }
    .retrouver__bon { --loupe: 192px; }
}

/* Les gestes : des boutons (la loupe va se poser sur ce qu'ils décrivent). Le geste actif prend un bord vert. */
.gestes { list-style: none; padding: 0; display: grid; gap: 12px; }
.geste {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 16px;
    width: 100%; min-height: 44px; padding: 16px 20px 16px 16px;
    border: 2px solid var(--bg); border-radius: var(--rayon-m);
    background: var(--bg); color: var(--ink); text-align: left; cursor: default;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.14s var(--ease);
}
.loupe-prete .geste { cursor: pointer; }
.loupe-prete .geste:active { transform: scale(0.99); }
.geste__num {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--sage); color: var(--green);
    font-family: var(--font-titre); font-size: 1.25rem; font-weight: 800;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.geste__corps { display: grid; gap: 4px; }
.geste__titre { font-family: var(--font-titre); font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.geste__texte { color: var(--text-2); line-height: 1.5; }
.geste--scan { border-color: var(--sage); background: var(--sage); }
.geste--scan .geste__num { background: var(--surface); }
.geste[aria-current="true"] { border-color: var(--green); background: var(--surface); }
.geste[aria-current="true"] .geste__num { background: var(--green); color: #FFFFFF; }
@media (hover: hover) and (pointer: fine) {
    .loupe-prete .geste:hover { border-color: #B9C5B3; }
    .loupe-prete .geste[aria-current="true"]:hover { border-color: var(--green); }
}

/* Le bon de prise en charge, dessiné en « em » : le cadre (conteneur de requêtes) donne l'échelle, 740 px d'origine
   = 100 % de sa largeur. La feuille garde ainsi ses proportions à toutes les largeurs, et sa copie dans la loupe aussi.
   Les couleurs et la police sont celles du vrai bon (KronoFix, templates/pec/print.html.twig) : une feuille blanche. */
.bon-cadre { container-type: inline-size; }
.bon {
    --u: calc(100cqw / 740);
    position: relative; overflow: hidden;
    padding: 2.15em 1.85em 1.7em;
    border-radius: 0.4em; background: #FFFFFF; color: #16181D;
    box-shadow: var(--ombre-carte), 0 0 0 1px var(--line);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: calc(13 * var(--u)); line-height: 1.45;
    transition: box-shadow 0.3s var(--ease);
}
.bon__entete { display: flex; justify-content: space-between; align-items: center; gap: 1.5em; padding-bottom: 1.25em; margin-bottom: 1.4em; border-bottom: max(1.5px, 0.19em) solid #16181D; }
.bon__nom { font-size: 1.385em; font-weight: 800; }
.bon__details { margin-top: 0.2em; font-size: 0.85em; line-height: 1.5; color: #444444; }
.bon__meta { text-align: right; }
.bon__titre { font-size: 1.155em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.035em; }
.bon__ref { margin: 0.1em 0; font-size: 1.54em; font-weight: 800; line-height: 1.3; }
.bon__date { font-size: 0.885em; color: #444444; }
.bon__legende-qr { margin-top: 0.3em; font-size: 0.77em; line-height: 1.3; color: #667085; }
.bon__boite { padding: 0.92em 1.23em; margin-bottom: 1.08em; border: max(1px, 0.08em) solid #C8CCD4; border-radius: 0.77em; }
.bon__rubrique { margin-bottom: 0.6em; font-size: 0.81em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.086em; color: #666666; }
.bon__gros { margin-bottom: 0.15em; font-size: 1.155em; font-weight: 700; }
.bon__k { font-size: 0.81em; color: #666666; }
.bon__ligne { display: flex; justify-content: space-between; gap: 1em; }
.bon__conditions { display: grid; gap: 0.55em; margin-top: 1.3em; }
.bon__conditions span { height: 0.4em; border-radius: 0.2em; background: #E3E6EB; }
.bon__conditions span:nth-child(2) { width: 94%; }
.bon__conditions span:nth-child(3) { width: 62%; }
.bon__signatures { display: flex; gap: 1.23em; height: 6.6em; margin-top: 1.4em; }
.bon__signatures p { flex: 1; padding: 0.62em 0.92em; border: max(1px, 0.08em) solid #C8CCD4; border-radius: 0.77em; font-size: 0.81em; color: #666666; }
.bon__pied { margin-top: 1.4em; padding-top: 0.8em; border-top: max(1px, 0.08em) solid #C8CCD4; text-align: center; font-size: 0.69em; color: #767676; }
/* Les trois cibles de la loupe : un surlignage de soleil derrière la cible active (sur le bon et sur sa copie dans le verre) */
.bon__cible { position: relative; display: inline-block; isolation: isolate; }
.bon__cible::before {
    content: ''; position: absolute; inset: -0.2em -0.35em; z-index: -1;
    border-radius: 0.3em; background: rgba(227, 178, 60, 0.4);
    opacity: 0; transition: opacity 0.3s var(--ease);
}
.bon__cible--active::before { opacity: 1; }
.bon__cible--active .bon__quatre { text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.15em; }
.bon__qr { display: block; width: 5.7em; height: 5.7em; margin: 0.5em 0 0 auto; }
.bon__qr::before { inset: -0.35em; }
.bon__qr svg { display: block; }
/* « Exemple » : un ruban de soleil en travers du coin bas droit (le bon est fictif, et il faut que ça se voie) */
.bon__ruban {
    position: absolute; right: -9em; bottom: 4em; display: grid; place-items: center; width: 30em; height: 4em;
    transform: rotate(-45deg); background: var(--sun); box-shadow: 0 0.2em 0.7em rgba(22, 32, 26, 0.25);
}
.bon__ruban span { font-family: var(--font-titre); font-size: 1.7em; font-weight: 800; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
/* Le geste « Prenez votre bon » : pas de loupe, le bon est cerclé */
.retrouver__bon--surligne .bon { box-shadow: 0 0 0 4px var(--sun), var(--ombre-carte); }

/* La loupe (loupe_controller.js) : un disque posé sur le bon, qui contient une copie agrandie du bon. Elle glisse d'une
   cible à l'autre ; avec « réduire les animations », elle saute. */
.loupe {
    position: absolute; left: 0; top: 0; z-index: 3;
    width: var(--loupe, 176px); height: var(--loupe, 176px);
    border: 4px solid var(--sun); border-radius: 50%;
    background: #FFFFFF; overflow: hidden; pointer-events: none;
    box-shadow: 0 16px 32px -10px rgba(22, 32, 26, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.9);
    opacity: 0; visibility: hidden;
    transition: transform 0.5s var(--ease), opacity 0.25s var(--ease), visibility 0s 0.25s;
}
.loupe--visible { opacity: 1; visibility: visible; transition: transform 0.5s var(--ease), opacity 0.25s var(--ease), visibility 0s; }
.loupe__monde { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 0.5s var(--ease); }
@media (prefers-reduced-motion: reduce) {
    .loupe, .loupe--visible, .loupe__monde { transition: none; }
}

/* ---------- 8. Services : cartes immersives (photo plein cadre, titre en bas, style Husqvarna) ---------- */
.services { display: grid; gap: 16px; }
.service {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 300px;
    border-radius: var(--rayon-l); overflow: hidden;
    color: #FFFFFF; text-decoration: none;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.service:hover { color: #FFFFFF; box-shadow: var(--ombre-carte); }
.service:active { transform: scale(0.985); }
/* Le visuel : la photo, ou en attendant un fond vert sombre (le texte blanc doit rester lisible) */
.service__visuel {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(70% 90% at 85% 20%, #3F6A48 0%, transparent 70%),
        var(--hero);
}
.service__photo { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.service__visuel::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10, 16, 12, 0.84) 0%, rgba(10, 16, 12, 0.4) 45%, transparent 75%);
}
.service__attente {
    position: absolute; left: 14px; top: 14px;
    display: inline-flex; gap: 8px; align-items: center;
    padding: 6px 10px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.78); color: var(--muted);
    font-size: 0.8125rem; font-weight: 600;
}
.service__corps { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.service__titre { font-family: var(--font-titre); font-size: clamp(1.75rem, 2.6vw, 2.125rem); font-weight: 700; line-height: 1.05; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.service__texte { color: var(--on-dark); max-width: 34ch; }
.service__action { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 700; color: var(--sun); }
.service__action .ico { transition: transform 0.25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
    .service:hover .service__photo { transform: scale(1.04); }
    .service:hover .service__action .ico { transform: translateX(4px); }
}
/* La réparation, métier de l'atelier : sa carte porte des preuves et un vrai bouton */
.service__preuves { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; }
.service__preuve { display: inline-flex; align-items: center; gap: 6px; }
.service__preuve .ico { color: var(--sun); }
.service__bouton { align-self: flex-start; margin-top: 10px; }
.service--principal { min-height: 420px; }
.service--principal .service__titre { font-size: clamp(1.875rem, 3.2vw, 2.75rem); max-width: 16ch; }
.service--principal .service__texte { max-width: 44ch; }
/* Sous 880 px, location et magasin côte à côte sous la grande carte de la réparation, en plus court (passe du 14/10/2026 :
   trois cartes empilées faisaient 1 050 px sur téléphone). Seule à côté (page Location désactivée), Magasin reprend la largeur. */
@media (max-width: 879px) {
    .services--reparation { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .services--reparation .service--principal { grid-column: 1 / -1; }
    /* Le titre et l'action seuls : la phrase couvrait toute la photo, à cette largeur */
    .services--reparation .service:not(.service--principal) { min-height: 180px; }
    .services--reparation .service:not(.service--principal) .service__corps { gap: 4px; padding: 16px; }
    .services--reparation .service:not(.service--principal) .service__titre { font-size: 1.375rem; }
    .services--reparation .service:not(.service--principal) .service__texte { display: none; }
    .services--reparation .service:not(.service--principal) .service__action { font-size: 0.9375rem; }
    .services--reparation .service:nth-child(2):last-child { grid-column: 1 / -1; }
}
@media (min-width: 880px) {
    .services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .service { min-height: 380px; }
    .service__corps { padding: 28px; }
    /* 2 + 1 : la réparation prend deux tiers de la largeur et toute la hauteur, location et magasin s'empilent à droite */
    .services--reparation { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; grid-template-areas: 'principal location' 'principal magasin'; }
    .services--reparation .service { min-height: 250px; }
    .services--reparation .service--principal { grid-area: principal; min-height: 540px; }
    .services--reparation .service:nth-child(2) { grid-area: location; }
    .services--reparation .service:nth-child(3) { grid-area: magasin; }
    .service--principal .service__corps { padding: 36px; gap: 12px; }
}

/* ---------- 9. Conseils (accueil) ---------- */
/* Deux colonnes étiquetées, de même hauteur : la grande carte prend la hauteur des quatre petites */
.conseils { display: grid; gap: 24px; }
.conseils__colonne { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.conseils__libelle { font-family: var(--font-texte); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.guide-vedette {
    position: relative;
    display: flex; flex-direction: column; flex: 1;
    border-radius: var(--rayon-l); overflow: hidden;
    background: var(--surface); color: var(--ink);
}
.guide-vedette__photo { flex: 0 0 auto; height: clamp(200px, 26vw, 300px); }
img.guide-vedette__photo { display: block; width: 100%; object-fit: cover; object-position: 55% 50%; }
.guide-vedette__corps { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.guide-vedette__titre { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.1; }
/* Le titre porte le lien ; son ::after rend toute la carte cliquable */
.guide-vedette__titre a { color: inherit; text-decoration: none; }
.guide-vedette__titre a::after { content: ''; position: absolute; inset: 0; }
.guide-vedette__titre a:focus-visible { outline: none; box-shadow: none; }
.guide-vedette:has(a:focus-visible) { outline: 3px solid var(--sun); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ink); }
.guide-vedette:hover .lien-fleche .ico { transform: translateX(4px); }
.guide-vedette__extrait { color: var(--text-2); max-width: 60ch; }

/* Les quatre saisons en cartes carrées (photo plein cadre, nom en bas), 2 × 2 */
.saisons__liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.carte-saison {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; justify-content: flex-end;
    aspect-ratio: 1 / 1; min-height: 100%;
    border-radius: 18px; overflow: hidden;
    background: var(--ink-2); color: #FFFFFF; text-decoration: none;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.carte-saison:hover { color: #FFFFFF; box-shadow: var(--ombre-carte); }
.carte-saison:active { transform: scale(0.98); }
.carte-saison--attente .carte-saison__visuel { background: radial-gradient(70% 90% at 80% 15%, #3F6A48 0%, transparent 70%), var(--ink-2); }
.carte-saison__visuel { position: absolute; inset: 0; z-index: -1; }
.carte-saison__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.carte-saison__visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 16, 12, 0.86) 0%, rgba(10, 16, 12, 0.3) 50%, transparent 75%); }
.carte-saison__pastille { position: absolute; top: 10px; left: 10px; }
.carte-saison__corps { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.carte-saison__nom { font-family: var(--font-titre); font-size: 1.375rem; font-weight: 700; line-height: 1.1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.carte-saison__action { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700; color: var(--sun); }
.carte-saison__action .ico { transition: transform 0.25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
    .carte-saison:hover .carte-saison__visuel img { transform: scale(1.05); }
    .carte-saison:hover .carte-saison__action .ico { transform: translateX(4px); }
}

/* Le relais vers l'atelier : remplace les « produits conseillés » tant que le magasin n'est pas en ligne */
.relais-atelier {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
    margin-top: 24px;
    padding: 24px;
    border: 2px solid rgba(22, 32, 26, 0.14);
    border-radius: var(--rayon-l);
}
.relais-atelier__texte { max-width: 52ch; font-size: 1.125rem; color: var(--text-2); }
.relais-atelier__texte strong { color: var(--ink); }
.relais-atelier__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 960px) {
    /* minmax(0, …) : la photo ne doit pas élargir sa colonne au-delà de sa part */
    .conseils { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; }
    /* La grande carte, à la hauteur des quatre petites : la photo à gauche sur toute la hauteur, le texte à droite */
    .guide-vedette { flex-direction: row; }
    .guide-vedette .guide-vedette__photo { flex: 0 0 42%; width: 42%; min-width: 0; height: auto; }
    .guide-vedette__corps { flex: 1; justify-content: center; padding: 32px; }
    /* Si la grande carte est plus haute que les carrés (écran moyen), les carrés s'étirent un peu pour la rejoindre */
    .saisons__liste { flex: 1; grid-auto-rows: minmax(0, 1fr); }
    .relais-atelier { padding: 28px 32px; }
}

/* ---------- 10. Location : cartes immersives (page Location et accueil) ---------- */
.grille-machines { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.carte-machine {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 300px; height: 100%;
    border-radius: var(--rayon-l); overflow: hidden;
    background: var(--ink-2); color: #FFFFFF;
}
.carte-machine--attente .carte-machine__visuel { background: radial-gradient(70% 90% at 80% 15%, #3F6A48 0%, transparent 70%), var(--ink-2); }
.carte-machine__visuel { position: absolute; inset: 0; z-index: -1; }
/* Une machine sans photo (carte de location, carte du menu) : le dessin occupe le cadre, le disque dans le haut, au-dessus du texte */
.dessin-machine {
    position: absolute; inset: 0; display: grid; place-items: start center; padding-top: 14%;
    background:
        repeating-linear-gradient(135deg, rgba(221, 231, 219, 0.05) 0 1px, transparent 1px 18px),
        radial-gradient(90% 90% at 88% 0%, rgba(227, 178, 60, 0.16), transparent 62%),
        linear-gradient(160deg, var(--hero), var(--ink-2));
}
.dessin-machine__disque {
    display: grid; place-items: center; width: var(--disque, 88px); height: var(--disque, 88px); border-radius: 50%;
    border: 5px solid rgba(221, 231, 219, 0.14); background: var(--sun); color: var(--ink);
    box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.5);
}
.dessin-machine__disque .ico { width: 55%; height: 55%; }
.carte-menu .dessin-machine { --disque: 64px; padding-top: 10%; }
/* Un article sans photo (cartes du blog, guide vedette, en-tête d'article) : le même dessin, centré dans le cadre de l'image */
.dessin-article { position: relative; display: block; overflow: hidden; }
.dessin-article .dessin-machine { place-items: center; padding-top: 0; }
.carte-machine__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.carte-machine__visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 16, 12, 0.88) 0%, rgba(10, 16, 12, 0.42) 45%, transparent 72%); }
.carte-machine__pastille { position: absolute; top: 12px; right: 12px; }
.carte-machine__corps { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.carte-machine__categorie { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sun); }
.carte-machine__nom { font-family: var(--font-titre); font-size: 1.5rem; font-weight: 700; line-height: 1.1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.carte-machine__prix { font-size: 0.9375rem; color: var(--on-dark); }
.carte-machine__prix strong { font-size: 1.125rem; color: #FFFFFF; }
.carte-machine__action { align-self: flex-start; margin-top: 6px; }
.carte-machine__vente { align-self: flex-start; font-size: 0.9375rem; }
.carte-machine .lien-fleche { position: relative; min-height: 0; }
.carte-machine .lien-fleche::before { content: ''; position: absolute; inset: -9px 0; }
@media (hover: hover) and (pointer: fine) {
    .carte-machine:hover .carte-machine__visuel img { transform: scale(1.04); }
}
@media (min-width: 1080px) {
    .grille-machines { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .carte-machine { min-height: 340px; }
}
/*
   Page Location, sur téléphone : chaque machine devient une ligne sombre d'environ 130 px (passe du 14/10/2026 : onze
   cartes de 300 px faisaient 3 460 px). La photo à gauche, dans son cadre ; à droite le statut, le nom, le prix et le
   bouton. La catégorie se retire : les tuiles de filtre, juste au-dessus, la disent déjà. L'accueil garde ses cartes.
*/
@media (max-width: 639px) {
    .grille-machines { gap: 10px; }
    .grille-machines .carte-machine { min-height: 108px; justify-content: center; padding: 10px 14px 12px 112px; }
    .grille-machines .carte-machine__visuel { inset: 10px auto 10px 10px; width: 88px; border-radius: 10px; overflow: hidden; }
    .grille-machines .carte-machine__visuel::after { display: none; }
    .grille-machines .carte-machine .dessin-machine { --disque: 48px; place-items: center; padding-top: 0; }
    .grille-machines .carte-machine__pastille { position: static; align-self: flex-start; margin-bottom: 4px; }
    .grille-machines .carte-machine__corps { gap: 4px; padding: 0; }
    .grille-machines .carte-machine__categorie { display: none; }
    .grille-machines .carte-machine__nom { font-size: 1.125rem; text-shadow: none; }
    .grille-machines .carte-machine__prix { font-size: 0.8125rem; line-height: 1.4; }
    .grille-machines .carte-machine__prix strong { font-size: 1rem; }
    /* Le bouton tient sur une ligne à 375 px ; plus étroit, il passe sur deux plutôt que de déborder */
    .grille-machines .carte-machine__action { margin-top: 4px; font-size: 0.875rem; }
    .grille-machines .bouton.carte-machine__action { min-height: 40px; padding: 8px 12px; }
}
/* Le dos des cartes, le temps qu'elles se retournent (contrôleur « filtre », page Location) :
   un vert de table de jeu, un fin croisillon, un filet d'or en retrait et l'emblème de l'atelier. */
.dos-carte { display: none; }
.se-retourne { position: relative; transform-style: preserve-3d; }
.se-retourne > .carte-machine { backface-visibility: hidden; }
.se-retourne > .dos-carte {
    position: absolute; inset: 0;
    display: grid; place-content: center; justify-items: center; gap: 12px;
    border-radius: var(--rayon-l);
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px),
        radial-gradient(80% 70% at 50% 40%, #2A6E44 0%, transparent 75%),
        var(--green);
    outline: 1px solid rgba(227, 178, 60, 0.55); outline-offset: -12px;
    backface-visibility: hidden; transform: rotateY(180deg);
}
.dos-carte__embleme { display: grid; place-items: center; width: 64px; height: 64px; border: 1.5px solid var(--sun); border-radius: 50%; color: var(--sun); }
.dos-carte__nom { font-family: var(--font-titre); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #FFFFFF; }

.grille-4 { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
@media (min-width: 1080px) { .grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
/* Sur téléphone, une rangée qui défile au doigt au lieu d'empiler des cartes hautes : la suivante dépasse à droite pour
   dire qu'il y en a d'autres (accueil, « À louer en ce moment » : 1 250 px empilés ; passe du 14/10/2026). */
@media (max-width: 719px) {
    .rangee-defile {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        margin-inline: calc(var(--gouttiere) * -1); padding: 4px var(--gouttiere) 10px; scroll-padding-inline: var(--gouttiere);
        scrollbar-width: none;
    }
    .rangee-defile::-webkit-scrollbar { display: none; }
    .rangee-defile > * { scroll-snap-align: start; }
}

/* ---------- 10 bis. Boutique : cartes produit (photo détourée sur blanc, prix, disponibilité, bouton rond) ---------- */
.grille-produits { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
/* La tuile « guide d'achat » : un rectangle pleine largeur sous le héros, le texte à gauche, un robot à droite */
.tuile-guide { display: flex; align-items: center; gap: 24px; padding: 28px; border-radius: 10px; background: var(--sage); }
.tuile-guide__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.tuile-guide__sur { font-size: 0.875rem; font-weight: 700; color: var(--muted); }
.tuile-guide__titre { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 700; line-height: 1.05; }
.tuile-guide__texte p { max-width: 56ch; font-size: 1rem; color: var(--text-2); }
.tuile-guide__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.tuile-guide__photo { flex: 0 0 auto; width: min(42%, 420px); height: auto; object-fit: contain; }
@media (max-width: 639px) {
    .tuile-guide { flex-direction: column; align-items: stretch; padding: 24px; }
    .tuile-guide__photo { align-self: center; width: min(100%, 260px); }
}
.carte-produit {
    display: flex; flex-direction: column; height: 100%;
    background: #FFFFFF; border: 1px solid #E1E4DE; border-radius: 10px;
    transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.carte-produit:hover { border-color: #C9D2C4; box-shadow: var(--ombre-douce); }
/* Le cadre photo garde son 4:3 (min-height: 0, sinon la photo carrée l'étire) ; la photo s'y inscrit, centrée */
.carte-produit__visuel { position: relative; aspect-ratio: 4 / 3; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 10px 10px 0 0; background: #FFFFFF; overflow: hidden; }
.carte-produit__visuel img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.carte-produit__vide { color: var(--muted); }
.carte-produit__promo { position: absolute; left: 16px; bottom: 12px; padding: 6px 10px; background: var(--sun); color: var(--ink); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.carte-produit__corps { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 0 16px 16px; }
.carte-produit__titre { font-family: var(--font-titre); font-size: 1.0625rem; font-weight: 700; line-height: 1.2; }
.carte-produit__gamme { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.carte-produit__specs { display: grid; gap: 6px; flex: 1; margin: 4px 0 2px; font-size: 0.8125rem; }
.carte-produit__specs div { display: grid; gap: 1px; }
.carte-produit__specs dt { color: var(--muted); }
.carte-produit__specs dd { font-weight: 600; }
.carte-produit__dispo { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--muted); }
.carte-produit__point { width: 9px; height: 9px; border-radius: 50%; background: var(--dispo); }
.carte-produit__dispo--sur_commande .carte-produit__point { background: var(--reserve); }
.carte-produit__dispo--epuise .carte-produit__point { background: #9AA39C; }
.carte-produit__fiche { position: relative; min-height: 32px; font-size: 0.875rem; }
.carte-produit__fiche::before { content: ''; position: absolute; inset: -6px 0; }
.carte-produit__pied { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 6px; }
.carte-produit__prix strong { display: block; font-family: var(--font-titre); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.carte-produit__ancien { display: block; font-size: 0.8125rem; color: var(--muted); text-decoration: line-through; }
.carte-produit__mention { display: block; font-size: 0.75rem; color: var(--muted); }
/* Le bouton rond : 40 px visibles, 48 px de cible tactile grâce au ::before */
.carte-produit__bouton { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #FFFFFF; transition: transform 0.2s var(--ease), background-color 0.2s var(--ease); }
.carte-produit__bouton::before { content: ''; position: absolute; inset: -4px; }
.carte-produit__bouton:hover { background: var(--green-dark); color: #FFFFFF; }
.carte-produit__bouton:active { transform: scale(0.94); }
/* La carte robot cliquable en entier (David, 12/10/2026) : avec une fiche, la zone du lien « Voir la fiche » couvre la
   carte et le bouton rond « Ce robot m'intéresse » reste au-dessus avec sa propre action ; sans fiche (boutique hors
   ligne), c'est le bouton rond qui couvre la carte. La photo avance un peu au survol. */
.carte-produit--cliquable { position: relative; cursor: pointer; }
.carte-produit--fiche .carte-produit__fiche::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 10px; }
/* Ici, la zone du lien est déjà la carte entière : le lien ne doit pas être le repère de son ::after (sinon la zone
   retombe à la taille du texte et un clic sur la photo ne mène plus nulle part), ni l'élargir de son ::before. */
.carte-produit--fiche .carte-produit__fiche { position: static; }
.carte-produit--fiche .carte-produit__fiche::before { content: none; }
.carte-produit--fiche .carte-produit__bouton { z-index: 2; }
.carte-produit--cliquable:not(.carte-produit--fiche) .carte-produit__bouton { position: static; }
.carte-produit--cliquable:not(.carte-produit--fiche) .carte-produit__bouton::before { inset: 0; z-index: 1; border-radius: 10px; }
/* Même piège que sur les cartes de la boutique : à l'appui, un scale du bouton ramènerait sa zone à 40 px et annulerait le clic */
.carte-produit--cliquable:not(.carte-produit--fiche) .carte-produit__bouton:active { transform: none; }
.carte-produit--cliquable:not(.carte-produit--fiche) .carte-produit__bouton:active .ico { transform: scale(0.88); }
.carte-produit--cliquable .carte-produit__visuel img { transition: transform 0.4s var(--ease); }
@media (hover: hover) {
    .carte-produit--cliquable:hover .carte-produit__visuel img { transform: scale(1.05); }
    .carte-produit--fiche:hover .carte-produit__fiche .ico:last-child { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .carte-produit--cliquable .carte-produit__visuel img { transition: none; }
    .carte-produit--cliquable:hover .carte-produit__visuel img { transform: none; }
}
.mention-prix { margin-top: 20px; font-size: 0.875rem; color: var(--muted); max-width: 90ch; }

/* Le catalogue des robots : les filtres dans une colonne à gauche, la grille à droite */
.catalogue { display: grid; gap: 24px; }
.catalogue__repli { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 2px solid var(--line); border-radius: var(--rayon-s); background: var(--surface); font-weight: 700; cursor: pointer; list-style: none; }
.catalogue__repli::-webkit-details-marker { display: none; }
.catalogue__repli::after { content: '+'; margin-left: auto; font-size: 1.25rem; color: var(--muted); }
.catalogue__filtres[open] > .catalogue__repli::after { content: '−'; }
.filtres-robots { padding-top: 12px; }
.filtre { border-top: 1px solid var(--line); }
.filtre:last-of-type { border-bottom: 1px solid var(--line); }
.filtre__titre { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; font-weight: 700; cursor: pointer; list-style: none; }
.filtre__titre::-webkit-details-marker { display: none; }
.filtre__titre::after { content: '−'; font-size: 1.125rem; color: var(--muted); }
.filtre:not([open]) > .filtre__titre::after { content: '+'; }
.filtre__liste { list-style: none; padding: 0 0 12px; display: grid; gap: 2px; }
.filtre__corps { display: grid; gap: 8px; padding: 0 0 18px; }
.case { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.9375rem; cursor: pointer; }
.case input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.case__nb { font-size: 0.875rem; color: var(--muted); }
.filtre__valeur { font-weight: 700; }
.filtre__select { width: 100%; min-height: 40px; padding: 6px 10px; border: 2px solid var(--line); border-radius: var(--rayon-s); background: var(--surface); font: inherit; }
/* 44 px de haut pour le doigt, sans pousser la mise en page : les marges négatives reprennent la place gagnée */
.curseur { display: block; width: 100%; height: 44px; margin: -10px 0 -14px; accent-color: var(--green); }
.curseur__bornes { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--muted); }
.filtres-robots__actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 16px; }
.filtre-robots--js .filtres-robots__filtrer { display: none; }
/* La colonne de la boutique : groupes en fieldset (sans cadre), cibles de 44 px, sous-catégories en retrait */
.filtres-boutique .filtre__groupe { border: 0; padding: 0; margin: 0; min-width: 0; }
.filtres-boutique .case { min-height: 44px; }
.filtres-boutique .case--sous { padding-left: 28px; font-size: 0.875rem; }
.filtres-boutique .case:has(input:focus-visible) { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
.filtres-boutique .case:has(input:disabled) { color: var(--muted); opacity: 0.55; cursor: not-allowed; }
.filtres-boutique .case input:disabled { cursor: not-allowed; }
/* Les filtres de la catégorie choisie : un ensemble de groupes par catégorie (un fieldset sans cadre), un seul visible ; ses groupes
   gardent leur filet du haut, la fin de la colonne est marquée par celui des boutons. */
.filtres-ensemble { border: 0; padding: 0; margin: 0; min-width: 0; }
.filtres-ensemble[hidden] { display: none; }
.filtres-boutique .filtre:last-of-type { border-bottom: 0; }
.filtres-boutique .filtres-ensemble .filtre:first-of-type { border-top: 1px solid var(--line); }
.filtres-boutique .filtres-robots__actions { border-top: 1px solid var(--line); }
.filtres-boutique .filtre__select { min-height: 44px; }
/* Une plage : « de … à … » et l'unité, deux champs de 44 px de haut côte à côte */
.filtre__plage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; padding: 0 0 18px; }
.filtre__plage-champ { display: flex; flex: 1 1 64px; align-items: center; gap: 6px; min-width: 0; font-size: 0.9375rem; }
.filtre__plage-champ .champ__saisie { width: 100%; min-width: 0; min-height: 44px; padding: 6px 8px; }
.filtre__unite { font-size: 0.875rem; color: var(--muted); }
.catalogue--seul { display: block; }
.catalogue__entete { margin-bottom: 20px; }
.catalogue__aide { margin-top: 6px; font-size: 0.875rem; color: var(--muted); }
.puce--radio { position: relative; cursor: pointer; }
.puce--radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.puce--radio:has(input:checked) { background: var(--sun); border-color: var(--sun); }
.puce--radio:has(input:focus-visible) { outline: 3px solid var(--sun); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ink); }
@media (min-width: 960px) {
    .catalogue { grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
    .catalogue__filtres { position: sticky; top: 24px; }
    /* La colonne de la boutique peut dépasser l'écran (les filtres de la catégorie s'ajoutent à la catégorie) : elle défile sur place,
       sinon ses derniers groupes ne se verraient qu'en bas de la grille. Une marge évite de rogner l'anneau de focus des cases, et la barre de défilement ne mord pas sur les champs. */
    .catalogue__filtres:has(> .filtres-boutique) { max-height: calc(100vh - 48px); overflow-y: auto; padding: 4px 14px 4px 4px; margin: -4px -14px -4px -4px; scrollbar-width: thin; }
    /* Sur grand écran, la colonne est toujours ouverte (le contrôleur y veille) : pas de bouton de repli */
    .catalogue__repli { display: none; }
    .filtres-robots { padding-top: 0; }
    .filtre:first-of-type { border-top: 0; }
    .filtre:first-of-type > .filtre__titre { padding-top: 4px; }
}

/*
   La gamme de la page Robots sur téléphone (.grille-produits--lignes) : une ligne par robot, la photo à gauche, et
   l'intertitre de chaque famille (FiltreRobots::FAMILLES). Quinze cartes pleine largeur faisaient 9 500 px (critique
   Impeccable du 14/10/2026). Au-delà de 640 px, la grille de cartes reprend, continue, sans intertitres.
*/
.grille-produits__famille { display: none; }
@media (max-width: 639px) {
    .grille-produits--lignes { gap: 8px; }
    .grille-produits--lignes .grille-produits__famille:not([hidden]) { display: block; padding-top: 16px; }
    .grille-produits--lignes .grille-produits__famille:first-child { padding-top: 0; }
    .famille-robots { font-size: 1.1875rem; font-weight: 700; line-height: 1.2; }
    .famille-robots__precision { display: block; margin-top: 2px; font-family: var(--font-texte); font-size: 0.875rem; font-weight: 600; color: var(--muted); }

    /*
       Une ligne de moins de 100 px (demande de David, 14/10/2026 : « réduire drastiquement ») : la photo, le nom, la
       surface et la connexion (la famille dit la pente), le prix et la disponibilité ; le bouton rond à droite. Toute
       la ligne mène à la fiche : « Voir la fiche » se réduit à sa zone étirée (::after, repère : la carte), son texte
       reste lu, et le focus clavier se montre sur la carte. overflow ne rogne pas ce ::after, dont le repère est la carte.
    */
    .grille-produits--lignes .carte-produit {
        display: grid; grid-template-columns: 64px auto minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 12px 10px 8px;
        grid-template-areas: "photo titre titre bouton" "photo specs specs bouton" "photo prix dispo bouton";
    }
    .grille-produits--lignes .carte-produit__corps,
    .grille-produits--lignes .carte-produit__pied { display: contents; }
    .grille-produits--lignes .carte-produit__visuel { grid-area: photo; aspect-ratio: 1; padding: 0; border-radius: 0; }
    /* Pas de badge « Promotion » de 9 px sur la vignette : « au lieu de … », à côté du prix, dit déjà la promotion */
    .grille-produits--lignes .carte-produit__promo,
    .grille-produits--lignes .carte-produit__gamme,
    .grille-produits--lignes .carte-produit__mention,
    .grille-produits--lignes .carte-produit__specs [data-champ="pente_max"] { display: none; }
    .grille-produits--lignes .carte-produit__titre { grid-area: titre; font-size: 1rem; }
    .grille-produits--lignes .carte-produit__specs { grid-area: specs; display: block; margin: 0; font-size: 0.8125rem; color: var(--text-2); }
    .grille-produits--lignes .carte-produit__specs dt,
    .grille-produits--lignes .carte-produit__precision { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .grille-produits--lignes .carte-produit__specs div { display: inline; }
    .grille-produits--lignes .carte-produit__specs dd { display: inline; margin: 0; font-weight: 600; }
    .grille-produits--lignes .carte-produit__specs div:not([data-champ="pente_max"]) ~ div:not([data-champ="pente_max"])::before { content: '·'; margin: 0 6px 0 2px; color: var(--muted); }
    .grille-produits--lignes .carte-produit__prix { grid-area: prix; }
    .grille-produits--lignes .carte-produit__prix strong { display: inline; font-size: 1rem; }
    .grille-produits--lignes .carte-produit__ancien { display: inline; margin-left: 4px; font-size: 0.75rem; }
    .grille-produits--lignes .carte-produit__dispo { grid-area: dispo; gap: 6px; min-width: 0; font-size: 0.8125rem; }
    .grille-produits--lignes .carte-produit__bouton { grid-area: bouton; }
    .grille-produits--lignes .carte-produit__fiche { grid-area: photo; align-self: start; width: 1px; height: 1px; min-height: 0; overflow: hidden; white-space: nowrap; }
    .grille-produits--lignes .carte-produit__fiche:focus-visible { outline: none; box-shadow: none; }
    .grille-produits--lignes .carte-produit--fiche:has(.carte-produit__fiche:focus-visible) { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
}

/*
   Le guide d'achat de la page Robots, dans sa tuile sous le héros : le bouton vert (un <summary>) déplie les quatre
   questions sur place, et chaque réponse filtre la gamme juste en dessous. Ouvert, le bouton passe en contour
   (« Refermer le guide ») pour laisser le seul vert à « Voir les robots qui conviennent ».
*/
.guide-achat { align-self: stretch; margin-top: 4px; }
.guide-achat__depli { width: fit-content; list-style: none; cursor: pointer; }
.guide-achat__depli::-webkit-details-marker { display: none; }
.guide-achat__depli .ico { transition: transform 0.2s var(--ease); }
.guide-achat__fermer,
.guide-achat[open] .guide-achat__ouvrir { display: none; }
.guide-achat[open] .guide-achat__fermer { display: inline; }
.guide-achat[open] > .guide-achat__depli { border-color: var(--ink); background: transparent; color: var(--ink); }
.guide-achat[open] > .guide-achat__depli:hover { border-color: var(--green); color: var(--green); }
.guide-achat[open] > .guide-achat__depli .ico { transform: rotate(180deg); }
.guide-achat__questions { display: grid; gap: 22px; margin-top: 24px; }
.question { margin: 0; padding: 0; border: 0; min-width: 0; }
.question__titre { margin-bottom: 10px; font-size: 1.0625rem; font-weight: 700; }
.question__choix { display: flex; flex-wrap: wrap; gap: 8px; }
/* Les réponses longues (« Pente forte par endroits, plus de 40 % ») passent à la ligne plutôt que de déborder. */
.question__choix .puce { white-space: normal; padding-block: 10px; line-height: 1.25; }
.guide-achat__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.tuile-guide__texte .guide-achat__note { font-size: 0.875rem; color: var(--text-2); }
/* Ouvert, la tuile aligne la photo en haut. */
.tuile-guide:has(.guide-achat[open]) { align-items: flex-start; }
/*
   Sur téléphone, le guide se réduit à l'essentiel (demande de David, 14/10/2026) : fermé, le titre et le bouton seuls
   (ni surtitre, ni paragraphe, ni photo, ni « Pourquoi un Kress ? », que le badge SGS du héros porte déjà) ; ouvert,
   des réponses en grille serrée (trois surfaces par ligne, deux réponses côte à côte), cibles de 44 px gardées.
*/
@media (max-width: 639px) {
    .tuile-guide--guide { padding: 16px; }
    .tuile-guide--guide .tuile-guide__texte { gap: 12px; }
    .tuile-guide--guide .tuile-guide__sur,
    .tuile-guide--guide .tuile-guide__texte > p:not([class]),
    .tuile-guide--guide .tuile-guide__texte > .lien-fleche,
    .tuile-guide--guide .tuile-guide__photo { display: none; }
    .tuile-guide--guide .tuile-guide__titre { font-size: 1.25rem; }
    .tuile-guide--guide .guide-achat { margin-top: 0; }
    .tuile-guide--guide .guide-achat__depli { width: 100%; }
    .tuile-guide--guide .guide-achat__questions { gap: 16px; margin-top: 16px; }
    .tuile-guide--guide .question__titre { margin-bottom: 8px; font-size: 0.9375rem; }
    .tuile-guide--guide .question__choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .tuile-guide--guide .question__choix:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tuile-guide--guide .question__choix .puce { justify-content: center; min-height: 44px; padding: 6px 10px; font-size: 0.875rem; text-align: center; text-wrap: balance; }
    .tuile-guide--guide .guide-achat__actions .bouton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .guide-achat__depli .ico { transition: none; } }

/* Le test SGS 2026 (section sauge) : la note, le classement et les douze défis */
.palmares { display: grid; gap: 36px; }
.palmares__texte { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.palmares__texte p { color: var(--text-2); max-width: 54ch; }
.palmares__note { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-titre); font-weight: 800; font-size: clamp(3.5rem, 8vw, 5.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--green); }
.palmares__note small { font-size: 0.32em; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.palmares__source { font-size: 0.875rem; color: var(--muted); }
.palmares__source .ico { display: inline-block; vertical-align: -2px; }
.palmares__sous-titre { margin-bottom: 14px; font-size: 1.125rem; font-weight: 700; }
.palmares__detail { display: grid; gap: 32px; align-content: start; }
.classement { list-style: none; padding: 0; display: grid; gap: 12px; }
.classement__ligne { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: 'rang nom score' 'rang barre barre'; align-items: center; gap: 6px 12px; }
.classement__rang { grid-area: rang; align-self: start; font-family: var(--font-titre); font-weight: 800; font-size: 1.125rem; color: var(--muted); }
.classement__nom { grid-area: nom; font-weight: 600; }
.classement__score { grid-area: score; font-weight: 700; font-variant-numeric: tabular-nums; }
.classement__barre { grid-area: barre; height: 10px; border-radius: 999px; background: rgba(22, 32, 26, 0.12); overflow: hidden; }
.classement__barre i { display: block; height: 100%; width: var(--part); border-radius: inherit; background: #8E9C90; }
.classement__ligne--kress .classement__nom { color: var(--green); }
.classement__ligne--kress .classement__barre i { background: var(--green); }
/* Le classement seul à droite (la liste des 12 défis est retirée, 14/10/2026) : centré face au texte, pas collé en haut */
@media (min-width: 1080px) { .palmares { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: center; } }

/* « L'atelier s'occupe de tout » : quatre cartes photo, titre et une phrase */
/* Deux services par ligne dès le téléphone (14/10/2026 : 1 600 px les uns sous les autres), en texte plus petit */
.services-robot { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.service-robot { display: grid; gap: 8px; align-content: start; }
/* height: auto, sinon l'attribut height de l'image l'emporte sur le ratio 3:2 */
.service-robot__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; margin-bottom: 6px; }
.service-robot__titre { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.service-robot p { color: var(--text-2); }
@media (max-width: 639px) {
    .service-robot { gap: 4px; }
    .service-robot__titre { font-size: 1.0625rem; }
    .service-robot p { font-size: 0.875rem; line-height: 1.45; }
}
@media (min-width: 640px) { .services-robot { column-gap: 20px; } }
@media (min-width: 1080px) { .services-robot { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* La technologie Kress : des cartes icône + titre + deux phrases */
.techno { list-style: none; padding: 0; display: grid; gap: 12px; }
.techno__carte { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--rayon-m); background: var(--surface); }
.techno__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sage); color: var(--green); }
.techno__titre { font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.techno__carte p { color: var(--text-2); font-size: 0.9375rem; }
/* Sur téléphone, l'icône à gauche du titre et du texte : une carte de moins de 150 px au lieu de 220 */
@media (max-width: 719px) {
    .techno__carte { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 18px; }
    .techno__icone { grid-row: span 2; }
}
@media (min-width: 720px) { .techno { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1080px) { .techno { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* EyePilot en images (page Robots, sous la technologie) : la galerie de la vitrine du client, sur fond encre.
   Une grande photo à gauche sur deux rangées, quatre à droite ; la légende dans une pastille sombre, en bas
   à gauche. Sur téléphone : la grande en tête, les quatre autres en carrés deux par deux. */
.section--encre { background: var(--ink); color: var(--on-dark); }
.section--encre .titre-section { color: #FFFFFF; }
.section--encre .sous-titre-section { max-width: 60ch; color: rgba(221, 231, 219, 0.72); }
.section--encre .mention-prix { color: rgba(221, 231, 219, 0.56); }
.galerie-eyepilot { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.galerie-eyepilot__photo { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--rayon-m); background: #222D25; }
.galerie-eyepilot__photo--grande { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.galerie-eyepilot__photo figure { height: 100%; margin: 0; }
.galerie-eyepilot__photo img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: var(--cadrage, 50% 50%);
    transition: transform 0.8s var(--ease);
}
.galerie-eyepilot__photo figcaption {
    position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
    padding: 6px 11px; border-radius: 12px;
    background: rgba(12, 18, 14, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #FFFFFF; font-size: 0.8125rem; font-weight: 600; line-height: 1.3;
}
@media (min-width: 720px) {
    /* Trois photos sur une seule rangée, la grande d'abord (14/10/2026 : cinq photos sur deux rangées, c'était trop) */
    .galerie-eyepilot { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); grid-template-rows: clamp(200px, 20vw, 280px); gap: 16px; }
    .galerie-eyepilot__photo, .galerie-eyepilot__photo--grande { aspect-ratio: auto; }
    .galerie-eyepilot__photo--grande { grid-column: auto; }
    .galerie-eyepilot__photo figcaption { left: 12px; bottom: 12px; max-width: calc(100% - 24px); }
}
/* La pastille ne s'arrondit tout à fait que lorsque la légende tient sur une ligne */
@media (min-width: 1080px) {
    .galerie-eyepilot__photo figcaption { left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 8px 14px; border-radius: 999px; font-size: 0.9375rem; }
}
/* Au survol, la photo avance à peine : la galerie vit, sans rien cacher */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .galerie-eyepilot__photo:hover img { transform: scale(1.04); }
}

/* La FAQ : des <details> natifs, sans animation */
.faq { display: grid; gap: 10px; margin-top: 8px; }
.faq details { padding: 0 20px; border-radius: var(--rayon-s); background: var(--surface); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; cursor: pointer; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--sage); color: var(--green); font-weight: 700; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 0 18px; color: var(--text-2); max-width: 68ch; }
.bandeau__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- 10 ter. Section Robots (accueil) : l'accroche et la bannière Kress, puis les trois robots mis en avant ---------- */
.robots-accueil__presentation { display: grid; gap: 28px; align-items: center; }
.robots-accueil__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.robots-accueil__accroche { max-width: 52ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--text-2); }
.robots-accueil__arguments { list-style: none; padding: 0; display: grid; gap: 12px; }
.robots-accueil__arguments li { display: flex; align-items: center; gap: 14px; }
.robots-accueil__icone { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--sage); color: var(--green); }
.robots-accueil__argument { font-weight: 600; }
.robots-accueil__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
/* height: auto, sinon l'attribut height de l'image l'emporte sur le ratio 16:9 */
.robots-accueil__banniere { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon-l); }
/*
   L'accroche posée sur la moitié sombre de la bannière 4x4 (David, 15/10/2026), composée comme celle de Kress sur la
   même photo : « 4×4 » en blanc très gras, une étiquette à deux lignes entre des filets fins (ici la gamme), un titre
   court et une phrase, alignés à gauche à partir du milieu de l'image. Ni couleur ajoutée ni dégradé : l'ombre de la
   photo suffit. Les tailles suivent la largeur de l'image (unités cqi) : l'accroche garde ses proportions et reste
   à droite du robot, de l'ordinateur au téléphone, où la phrase disparaît faute de place.
*/
.robots-accueil__visuel { position: relative; margin: 0; container-type: inline-size; border-radius: var(--rayon-l); overflow: hidden; }
/* Le cadrage glisse vers la droite de la photo, la plus sombre : le robot reste entier, l'accroche gagne de l'ombre */
.robots-accueil__visuel--pub .robots-accueil__banniere { object-position: 62% 50%; }
.robots-accueil__pub {
    position: absolute; inset: 0 4cqi 0 52%;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    color: #FFFFFF; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
.robots-accueil__pub-signature { display: flex; align-items: center; gap: 1.6cqi; }
.robots-accueil__pub-modele { font-family: var(--font-titre); font-weight: 800; font-size: 12.5cqi; line-height: 0.78; letter-spacing: -0.01em; }
.robots-accueil__pub-gamme { display: grid; font-size: clamp(0.625rem, 2.1cqi, 0.9375rem); font-weight: 500; line-height: 1; }
.robots-accueil__pub-gamme > span { padding: 0.55cqi 0.4cqi 0.55cqi 0; border-bottom: 1px solid rgba(255, 255, 255, 0.75); }
.robots-accueil__pub-gamme > span:first-child { border-top: 1px solid rgba(255, 255, 255, 0.75); }
.robots-accueil__pub-titre { margin-top: 2.4cqi; font-weight: 700; font-size: clamp(0.8125rem, 3.3cqi, 1.375rem); line-height: 1.2; }
.robots-accueil__pub-texte { margin-top: 1.2cqi; max-width: 30cqi; font-size: clamp(0.6875rem, 2.1cqi, 0.9375rem); line-height: 1.45; opacity: 0.92; }
@container (max-width: 479px) { .robots-accueil__pub-texte { display: none; } }
/*
   Les trois robots mis en avant, en lignes compactes à toutes les largeurs (David, 15/10/2026 : les cartes de 555 px
   étaient trop grosses, et trois grandes photos du même robot blanc n'en disaient pas plus qu'une ; la bannière porte
   déjà l'image). La vignette, le nom, la surface et la connexion, le prix et le bouton rond : trois colonnes sur
   ordinateur, une pile sur téléphone. Comme les lignes de la page Robots : toute la ligne mène à la fiche, « Voir la
   fiche » se réduit à sa zone étirée, son texte reste lu, et le focus clavier se montre sur la carte.
*/
.robots-accueil__cartes { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: clamp(28px, 4vw, 44px); }
.robots-accueil__suite { margin-top: 16px; }
@media (min-width: 720px) { .robots-accueil__cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.robots-accueil__cartes .carte-produit {
    display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-content: center; align-items: center; gap: 2px 14px; padding: 10px 14px 10px 10px;
    grid-template-areas: "photo titre bouton" "photo specs bouton" "photo prix bouton";
}
.robots-accueil__cartes .carte-produit__corps,
.robots-accueil__cartes .carte-produit__pied { display: contents; }
.robots-accueil__cartes .carte-produit__visuel { grid-area: photo; aspect-ratio: 1; padding: 0; border-radius: 0; }
/* Pas de badge « Promotion » sur la vignette : « au lieu de … », à côté du prix, dit déjà la promotion */
.robots-accueil__cartes .carte-produit__promo,
.robots-accueil__cartes .carte-produit__gamme,
.robots-accueil__cartes .carte-produit__mention,
.robots-accueil__cartes .carte-produit__dispo,
.robots-accueil__cartes .carte-produit__specs [data-champ="pente_max"] { display: none; }
.robots-accueil__cartes .carte-produit__titre { grid-area: titre; align-self: end; font-size: 1rem; }
.robots-accueil__cartes .carte-produit__specs { grid-area: specs; display: block; margin: 0; font-size: 0.8125rem; color: var(--text-2); }
.robots-accueil__cartes .carte-produit__specs dt,
.robots-accueil__cartes .carte-produit__precision { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.robots-accueil__cartes .carte-produit__specs div { display: inline; }
.robots-accueil__cartes .carte-produit__specs dd { display: inline; margin: 0; font-weight: 600; }
.robots-accueil__cartes .carte-produit__specs div:not([data-champ="pente_max"]) ~ div:not([data-champ="pente_max"])::before { content: '·'; margin: 0 6px 0 2px; color: var(--muted); }
.robots-accueil__cartes .carte-produit__prix { grid-area: prix; align-self: start; }
.robots-accueil__cartes .carte-produit__prix strong { display: inline; font-size: 1.0625rem; }
.robots-accueil__cartes .carte-produit__ancien { display: inline; margin-left: 4px; font-size: 0.75rem; }
.robots-accueil__cartes .carte-produit__bouton { grid-area: bouton; }
.robots-accueil__cartes .carte-produit__fiche { grid-area: photo; align-self: start; width: 1px; height: 1px; min-height: 0; overflow: hidden; white-space: nowrap; }
.robots-accueil__cartes .carte-produit__fiche:focus-visible { outline: none; box-shadow: none; }
.robots-accueil__cartes .carte-produit--fiche:has(.carte-produit__fiche:focus-visible) { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
/* Sur téléphone, la ligne de la page Robots : vignette de 72 px, moins de 100 px par robot */
@media (max-width: 719px) {
    .robots-accueil__cartes { gap: 8px; }
    .robots-accueil__cartes .carte-produit { grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 12px; padding: 8px 12px 8px 8px; }
}
@media (min-width: 960px) { .robots-accueil__presentation { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; } }

/* ---------- 11. L'atelier (proximité) ---------- */
/* L'atelier : le titre et ses promesses, puis les infos pratiques en cartes à gauche et le plan à droite
   (mise en page de la vitrine actuelle de l'atelier, demandée par David le 10 octobre 2026) */
.atelier {
    display: grid; gap: 24px;
    padding: 24px 16px 16px;
    border-radius: 32px;
    background: var(--surface);
}
.atelier__entete { display: grid; gap: 18px; padding-inline: 8px; }
.atelier .titre-section { font-size: clamp(1.875rem, 3.4vw, 2.625rem); }
.atelier__grille { display: grid; gap: 12px; }

.infos-atelier { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.info-atelier {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 20px;
    border: 1px solid var(--line); border-radius: var(--rayon-l);
    background: var(--bg);
}
.info-atelier__icone {
    display: grid; place-items: center; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--sage); color: var(--green);
}
.info-atelier__corps { display: grid; gap: 6px; min-width: 0; }
.info-atelier__label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 26px; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.info-atelier__label .pastille { font-size: 0.75rem; padding: 3px 10px; }
.info-atelier__label .pastille::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.info-atelier__valeur { font-family: var(--font-titre); font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.info-atelier__valeur a { color: var(--ink); text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.info-atelier__secondaire { overflow-wrap: anywhere; }
.info-atelier__secondaire a { color: var(--green); }
/* Les horaires d'ouverture (partiels/_horaires.html.twig) : le jour, puis ses heures dessous ; en tableau dans la carte dès 480 px */
.horaires { display: grid; gap: 8px; margin: 0; }
.horaires dd { margin: 0; font-variant-numeric: tabular-nums; }
.info-atelier .horaires { gap: 6px; }
.info-atelier .horaires dt { font-weight: 700; color: var(--ink); }
.info-atelier .horaires dd { color: var(--text-2); }
@media (min-width: 480px) {
    .info-atelier .horaires { grid-template-columns: auto 1fr; gap: 6px 20px; }
    .info-atelier .horaires__ligne { display: contents; }
}

/* La façade : la photo de l'atelier, les deux boutons posés en bas à gauche sur un léger dégradé */
.facade-atelier {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 440px;
    border-radius: var(--rayon-l);
    background: var(--ink);
}
.facade-atelier::after { /* le dégradé : les boutons restent lisibles quelle que soit la photo */
    content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 45%;
    background: linear-gradient(to top, rgba(12, 18, 14, 0.55), rgba(12, 18, 14, 0));
    pointer-events: none;
}
.facade-atelier__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
img.facade-atelier__photo { object-fit: cover; }
.facade-atelier__photo .photo-attente { height: 100%; }
.facade-atelier__actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; }
.facade-atelier__avis {
    background: rgba(22, 32, 26, 0.62); color: #FFFFFF;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.facade-atelier__avis:hover { background: rgba(22, 32, 26, 0.78); }
/* Sur téléphone, une façade moins haute (440 px avant) et les deux boutons côte à côte, à parts égales (passe du 14/10/2026) */
@media (max-width: 719px) {
    .facade-atelier { min-height: 300px; }
    .facade-atelier__actions { flex-wrap: nowrap; gap: 8px; padding: 12px; }
    .facade-atelier__actions > .bouton { flex: 1 1 0; min-width: 0; gap: 6px; padding-inline: 8px; font-size: 0.9375rem; white-space: nowrap; }
}

/* Le plan, en bande sous les cartes et la façade : la capture du plan Google Maps, à trois tailles (mobile,
   tablette, ordinateur) dont la bande prend exactement les proportions, pour que les mentions de Google restent
   visibles dans les coins. Google Maps interactif se pose par-dessus quand le visiteur l'accepte. */
.plan-atelier {
    position: relative; isolation: isolate; overflow: hidden;
    aspect-ratio: 420 / 300;
    border: 1px solid var(--line); border-radius: var(--rayon-l);
    background: #E5E3DF; /* le fond des plans Google, le temps du chargement */
}
.plan-atelier__apercu { display: block; height: 100%; cursor: pointer; }
.plan-atelier__apercu img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plan-atelier__cadre { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plan-atelier__charger { /* en haut à droite : la fiche de Google occupe le coin gauche */
    position: absolute; top: 10px; right: 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 44px; min-height: 44px; padding: 8px;
    border: 0; border-radius: 999px;
    background: var(--surface); color: var(--ink);
    box-shadow: var(--ombre-douce);
    font: inherit; font-weight: 600; cursor: pointer;
    transition: transform 160ms var(--ease);
}
.plan-atelier__charger:active { transform: scale(0.97); }
.plan-atelier__charger[hidden] { display: none; }
.plan-atelier__charger .ico { color: var(--green); }
.plan-atelier__libelle { /* sur mobile, l'icône seule : le libellé reste lu par les lecteurs d'écran */
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (min-width: 720px) {
    .plan-atelier { aspect-ratio: 960 / 320; }
    .plan-atelier__charger { top: 14px; right: 14px; padding: 8px 16px; }
    .plan-atelier__libelle { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

/* Le bandeau des cookies de Google Maps (partiels/_consentement.html.twig) : une carte posée en bas à gauche,
   qui ne bloque pas la page. « Refuser » et « Accepter » ont exactement le même poids (CNIL). */
.consentement {
    position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px;
    display: grid; gap: 10px;
    max-width: 420px; padding: 20px;
    border: 1px solid var(--line); border-radius: var(--rayon-l);
    background: var(--surface); color: var(--ink);
    box-shadow: 0 18px 48px rgba(22, 32, 26, 0.18);
    animation: consentement-entree 320ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.consentement[hidden] { display: none; }
.consentement__titre { display: flex; align-items: center; gap: 8px; font-family: var(--font-titre); font-size: 1.125rem; font-weight: 700; }
.consentement__titre .ico { color: var(--green); }
.consentement__texte { color: var(--text-2); font-size: 0.9375rem; line-height: 1.5; }
.consentement__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.consentement__choix { background: var(--ink); color: #FFFFFF; }
.consentement__choix:hover { background: var(--green); color: #FFFFFF; }
@keyframes consentement-entree { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .consentement { animation: none; } }
@media (min-width: 720px) { .consentement { left: 20px; bottom: 20px; right: auto; } }

@media (min-width: 1080px) {
    .atelier { gap: 36px; padding: 48px; }
    .atelier__entete { padding: 0; }
    .atelier__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; }
    .facade-atelier { min-height: 0; }
    .facade-atelier__actions { padding: 20px; }
    .plan-atelier { grid-column: 1 / -1; aspect-ratio: 1200 / 340; }
}

/* Les avis Google sous l'encart de l'atelier (partiels/_avis.html.twig), sur fond sauge. La version encre, note
   géante et cartes d'un bord à l'autre « dénotait trop » (David, 10 octobre 2026) : tout est ramené à l'échelle
   des autres sections. La piste est celle de la bande du héros (.bande__* : défilement, bords qui s'estompent,
   boutons discrets) ; seules ses marges et ses cartes changent. */
.avis-google { overflow-x: clip; background: var(--sage); } /* comme .bande : les boutons débordent de 6 px quand le cadre touche les bords */
.avis-google__entete { display: grid; gap: 20px; }
/* Le titre et la note mis en avant, comme sur la vitrine du client, mais à l'échelle du site */
.avis-google__titre { max-width: 14ch; font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; color: var(--ink); }
.avis-google__score { display: inline-flex; align-items: center; gap: clamp(12px, 1.6vw, 18px); justify-self: start; color: var(--ink); text-decoration: none; }
a.avis-google__score:hover { color: var(--ink); }
/* La note en gros : encre qui tourne au vert vers le bas ; chiffres à chasse fixe pour que le compteur
   (compteur_controller.js) ne fasse pas trembler la ligne */
.avis-google__note {
    font-family: var(--font-titre); font-size: clamp(3.75rem, 8vw, 6rem); font-weight: 700; line-height: 0.8; letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(172deg, var(--ink) 35%, var(--green) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.avis-google__detail { display: grid; gap: 6px; }
.avis-google__nombre { font-size: 0.9375rem; color: var(--text-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 0.2s var(--ease); }
a.avis-google__score:hover .avis-google__nombre { text-decoration-color: currentColor; }
@media (min-width: 1080px) {
    /* Le titre à gauche, la note à droite, alignés sur leur pied */
    .avis-google__entete { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
}
/* Les étoiles de la note s'allument une à une quand la pastille arrive, pendant que la note compte */
.reveal-pret .avis-google__score .etoiles .ico { opacity: 0; transform: scale(0.5); }
.reveal-pret .avis-google__score.est-visible .etoiles .ico {
    opacity: 1; transform: none;
    transition: opacity 0.2s ease-out, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(200ms + var(--e, 0) * 90ms);
}
@media (prefers-reduced-motion: reduce) {
    .reveal-pret .avis-google__score .etoiles .ico { opacity: 1; transform: none; transition: none; }
}
.avis-google__piste { gap: 16px; padding: 28px 0 32px; }
.avis-google__piste .bande__liste { gap: 16px; }
.avis-google__cadre .bande__bord { top: 28px; bottom: 32px; color: #6F8273; }
.avis-google__cadre .bande__bord:hover { background: rgba(22, 32, 26, 0.08); }
/* Moins de trois avis : rien ne défile, les cartes se rangent côte à côte */
.avis-google__piste--fixe { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.avis-google__piste--fixe .bande__liste { width: auto; flex-wrap: wrap; }

/* Une carte d'avis : blanche, un guillemet vert, le texte, puis qui l'a écrit et ses étoiles */
.avis {
    display: flex; flex-direction: column; gap: 10px;
    width: min(316px, 80vw); margin: 0; padding: 22px 22px 18px;
    border-radius: var(--rayon-m); background: var(--surface);
}
.avis__guillemet { height: 0.45em; font-family: var(--font-titre); font-size: 2.75rem; font-weight: 700; line-height: 0.9; color: var(--green); }
.avis__texte { flex: 1; margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text-2); }
/* Un avis de quelques mots (« Nickel ! ») se lit un peu plus gros */
.avis--court .avis__texte { font-family: var(--font-titre); font-size: 1.625rem; font-weight: 700; line-height: 1.15; color: var(--ink); }
.avis__pied { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.avis__initiale {
    display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    background: var(--sage); color: var(--green); font-family: var(--font-titre); font-size: 0.9375rem; font-weight: 700;
}
.avis__qui { display: grid; min-width: 0; margin-right: auto; line-height: 1.3; }
.avis__auteur { font-size: 0.875rem; font-weight: 700; color: var(--ink); }
/* Un avis lu en direct : le nom renvoie au profil Google de l'auteur (Google le demande), sans souligné qui charge la carte. */
a.avis__auteur { text-decoration: none; }
a.avis__auteur:hover { text-decoration: underline; }
.avis__source { font-size: 0.75rem; color: var(--muted); }
.avis .etoiles { flex-shrink: 0; margin: 0; }
.avis .etoiles > span { display: contents; }
.etoiles__vide { color: var(--line); }

/* ---------- Notre histoire : une frise de quatre dates ---------- */
.frise-histoire { position: relative; list-style: none; padding: 0; display: grid; gap: 28px; }
.frise-histoire::before { content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; background: var(--sage-2); }
.frise-histoire__etape { position: relative; padding-left: 30px; }
.frise-histoire__point { position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--sage); }
.frise-histoire__date { font-family: var(--font-titre); font-size: 1.625rem; font-weight: 700; line-height: 1; color: var(--green); }
.frise-histoire__titre { margin-top: 8px; font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.frise-histoire__texte { margin-top: 6px; max-width: 34ch; color: var(--text-2); }
/* « Aujourd'hui » : un anneau au bout du fil, qui pulse doucement parce que l'histoire continue */
.frise-histoire__etape--aujourdhui .frise-histoire__point { background: var(--surface); border: 3px solid var(--green); animation: perle-pulse 2.6s ease-in-out infinite; }
.frise-histoire__etape--aujourdhui .frise-histoire__date { color: var(--ink); }
@keyframes perle-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--sage); }
    50% { box-shadow: 0 0 0 9px rgba(31, 90, 54, 0.14); }
}
@media (prefers-reduced-motion: reduce) { .frise-histoire__etape--aujourdhui .frise-histoire__point { animation: none; } }
/* Les tampons d'« Aujourd'hui » : encre verte, double filet, posés un peu de travers. La note Google ferme la marche, à l'encre noire. */
.tampons { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; }
.tampon {
    --r: -2deg; --n: 0;
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 12px 7px 10px;
    border: 2px solid currentColor; border-radius: 6px; outline: 1px solid currentColor; outline-offset: 2px;
    color: var(--green); background: var(--surface);
    font-family: var(--font-titre); font-size: 0.9375rem; font-weight: 700; line-height: 1.15; letter-spacing: 0.03em; text-transform: uppercase;
    transform: rotate(var(--r));
}
.tampon .ico { flex: none; }
.tampon:nth-child(2) { --r: 1.5deg; --n: 1; }
.tampon:nth-child(3) { --r: -1deg; --n: 2; }
.tampon--note { --r: -2.5deg; --n: 3; flex-wrap: wrap; gap: 6px 10px; padding: 8px 14px 8px 12px; color: var(--ink); letter-spacing: 0; text-transform: none; }
.tampon__note { font-size: 2rem; line-height: 1; }
.tampon__note small { font-size: 0.5em; color: var(--text-2); }
.tampon__avis { display: grid; gap: 3px; font-size: 0.875rem; }
.etoiles { display: flex; gap: 1px; color: var(--sun); }
.etoiles .ico { fill: currentColor; }
.etoiles .ico:nth-child(2) { --e: 1; } .etoiles .ico:nth-child(3) { --e: 2; } .etoiles .ico:nth-child(4) { --e: 3; } .etoiles .ico:nth-child(5) { --e: 4; }
@media (min-width: 880px) {
    .tampons { flex-direction: column; flex-wrap: nowrap; gap: 12px; }
    .tampon:nth-child(even) { margin-left: 10px; }
}
@media (min-width: 880px) {
    .frise-histoire { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
    /* La ligne passe à l'horizontale, au-dessus des dates, et continue après la dernière : l'histoire n'est pas finie */
    .frise-histoire::before { left: 7px; right: 0; top: 13px; bottom: auto; width: auto; height: 2px; }
    .frise-histoire__etape { padding-left: 0; padding-top: 34px; }
}
/* Les perles sur le fil (mesures posées par perles_controller.js) : le fil se trace, chaque point
   part de la place du premier et glisse jusqu'à sa date, puis le texte de la date apparaît.
   Le bloc lui-même n'est pas caché par le reveal : seuls le fil, les points et les textes bougent. */
.reveal-pret .frise-histoire[data-reveal] { opacity: 1; transform: none; transition: none; }
.reveal-pret .frise-histoire::before { transform: scaleY(0); transform-origin: center top; transition: transform 1.4s var(--ease); }
.reveal-pret .frise-histoire__point { transform: translate(var(--dx, 0px), var(--dy, 0px)); transition: transform var(--perle-duree, 0.9s) cubic-bezier(0.22, 1, 0.36, 1) var(--perle-delai, 0ms); }
.reveal-pret .frise-histoire__date, .reveal-pret .frise-histoire__titre, .reveal-pret .frise-histoire__texte {
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.6s var(--ease) calc(var(--perle-delai, 0ms) + var(--perle-duree, 0.9s) - 0.25s), transform 0.6s var(--ease) calc(var(--perle-delai, 0ms) + var(--perle-duree, 0.9s) - 0.25s);
}
.reveal-pret .frise-histoire.est-visible::before { transform: none; }
.reveal-pret .frise-histoire.est-visible .frise-histoire__point { transform: none; }
.reveal-pret .frise-histoire.est-visible .frise-histoire__date, .reveal-pret .frise-histoire.est-visible .frise-histoire__titre, .reveal-pret .frise-histoire.est-visible .frise-histoire__texte { opacity: 1; transform: none; }
@media (min-width: 880px) {
    .reveal-pret .frise-histoire::before { transform: scaleX(0); transform-origin: left center; }
    .reveal-pret .frise-histoire.est-visible::before { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .reveal-pret .frise-histoire::before, .reveal-pret .frise-histoire__point, .reveal-pret .frise-histoire__date, .reveal-pret .frise-histoire__titre, .reveal-pret .frise-histoire__texte { opacity: 1; transform: none; transition: none; }
}

/* Les tampons se posent quand la perle « Aujourd'hui » est arrivée, l'un après l'autre : chacun tombe
   d'un peu plus haut (plus grand), frappe le papier, rebondit à peine et se fixe. Puis les étoiles
   de la note s'allument une à une. */
.reveal-pret .tampon { opacity: 0; }
.reveal-pret .frise-histoire.est-visible .tampon {
    animation: tampon-pose 0.5s calc(var(--perle-delai, 0ms) + var(--perle-duree, 0.9s) + 0.1s + var(--n) * 0.34s) both;
}
@keyframes tampon-pose {
    0% { opacity: 0; transform: rotate(calc(var(--r) - 5deg)) scale(1.6); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45); }
    40% { opacity: 1; transform: rotate(var(--r)) scale(0.95); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
    70% { transform: rotate(var(--r)) scale(1.015); }
    100% { opacity: 1; transform: rotate(var(--r)) scale(1); }
}
.reveal-pret .frise-histoire .etoiles .ico { opacity: 0; transform: scale(0.5); }
.reveal-pret .frise-histoire.est-visible .etoiles .ico {
    opacity: 1; transform: none;
    transition: opacity 0.2s ease-out, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--perle-delai, 0ms) + var(--perle-duree, 0.9s) + 0.1s + 3 * 0.34s + 0.35s + var(--e, 0) * 0.09s);
}
@media (prefers-reduced-motion: reduce) {
    .reveal-pret .tampon, .reveal-pret .frise-histoire.est-visible .tampon { opacity: 1; animation: none; }
    .reveal-pret .frise-histoire .etoiles .ico, .reveal-pret .frise-histoire.est-visible .etoiles .ico { opacity: 1; transform: none; transition: none; }
}

/* ---------- 12. Marques ---------- */
/* overflow-x: clip : pendant leur arrivée, les logos décalés à droite ne créent pas de défilement horizontal */
.marques { padding-block: 40px 72px; overflow-x: clip; }
.marques__interieur { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.marques__titre { font-family: var(--font-texte); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.marques__liste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; font-family: var(--font-titre); font-size: 1.125rem; font-weight: 700; color: #6D7A70; text-transform: uppercase; align-items: center; }
/* Même boîte pour tous (48 px de haut, 160 px de large au plus) : les logos très larges sont limités
   par la largeur, les plus compacts (Milwaukee, IMER) gagnent en hauteur et s'équilibrent avec les autres. */
.marques__logo { display: block; width: auto; height: 48px; max-width: 160px; object-fit: contain; }
@media (min-width: 1080px) { .marques__liste { font-size: 1.25rem; gap: 16px 56px; } }
/* L'arrivée : chaque logo glisse de la droite vers sa place, l'un après l'autre (décalage --reveal-delai
   du contrôleur reveal). Sans mouvement réduit seulement : sinon, la règle générale les montre d'emblée. */
@media (prefers-reduced-motion: no-preference) {
    .reveal-pret .marques__liste[data-reveal="groupe"]:not(.est-visible) > * { transform: translateX(72px); }
}

/* ---------- 13. Pages intérieures ---------- */
.bandeau { position: relative; overflow: hidden; background: var(--ink); color: #FFFFFF; padding-block: calc(var(--entete-h) + clamp(32px, 6vw, 72px)) clamp(40px, 7vw, 88px); }
/* Avec une photo (emplacement « …_entete » du BO) : image plein cadre sous un voile sombre, texte par-dessus */
/* Une seule hauteur pour tous les bandeaux photo (choix de David du 13/10/2026, « il y a trop de variations ») :
   environ 440 px sur un écran de 1440 px, 300 px sur téléphone. Seul le bandeau des Robots, plus chargé, est plus haut. */
.bandeau--photo { display: flex; align-items: flex-end; min-height: calc(var(--entete-h) + clamp(220px, 26vw, 336px)); }
/* Le texte se pose en bas : en haut, juste la place du menu, pour qu'un titre plus long ne grandisse pas le bandeau */
.bandeau--photo:not(.bandeau--droite) { padding-top: calc(var(--entete-h) + 24px); }
.bandeau__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bandeau--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 22, 17, 0.9) 0%, rgba(14, 22, 17, 0.62) 50%, rgba(14, 22, 17, 0.25) 100%); }
.bandeau__contenu { position: relative; z-index: 1; }
.bandeau__titre { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.025em; }
.bandeau__intro { margin-top: 18px; max-width: 58ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--on-dark); }

/* Les en-têtes photo des pages : la hauteur commune des bandeaux (voir .bandeau--photo, choix de David du 13/10/2026,
   après celui du 10/10 : « le contenu remonte »), cadrage à gauche, et sur mobile la photo au-dessus du texte.
   Robots : le texte à droite (sur la photo, le robot est à gauche), un badge « n° 1 du test SGS » au-dessus du titre */
.bandeau--grand .bandeau__photo { object-position: 30% 50%; }
.bandeau--droite::after { background: linear-gradient(90deg, rgba(14, 22, 17, 0.08) 0%, rgba(14, 22, 17, 0.3) 42%, rgba(14, 22, 17, 0.86) 100%); }
.bandeau--droite .bandeau__contenu { display: flex; justify-content: flex-end; }
.bandeau--droite .bandeau__texte { max-width: 560px; }
/* Sur grand écran, une colonne plus large : le titre tient sur deux lignes et le bandeau garde la hauteur des autres */
@media (min-width: 1080px) { .bandeau--droite .bandeau__texte { max-width: 680px; } }
.bandeau__badge {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; margin-bottom: 18px; padding: 8px 14px 8px 10px;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF; font-weight: 600; font-size: 0.9375rem; line-height: 1.3; text-decoration: none;
}
.bandeau__badge .ico { flex-shrink: 0; color: var(--sun); }
.bandeau__badge:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.6); }
/* Sur tablette (bannières Kress, environ 1600 × 620, robot à gauche) : la bannière entière au-dessus, le texte dessous,
   sinon le texte couvre le robot. */
@media (min-width: 720px) and (max-width: 1199px) {
    .bandeau--droite { display: grid; min-height: 0; padding-top: 0; }
    .bandeau--droite .bandeau__photo { position: static; width: 100%; height: auto; aspect-ratio: 1600 / 621; }
    .bandeau--droite::after { display: none; }
    .bandeau--droite .bandeau__contenu { padding-top: 32px; justify-content: flex-start; }
}
@media (max-width: 719px) {
    /* Robots, sur mobile : le texte sur la photo, comme le héros de l'accueil (demande de David, 14/10/2026), sous le
       même voile vertical plus marqué : le texte couvre toute la photo, il reste lisible du badge aux boutons */
    .bandeau--droite { padding-top: calc(var(--entete-h) + 24px); }
    .bandeau--droite::after { background: linear-gradient(180deg, rgba(14, 22, 17, 0.7) 0%, rgba(14, 22, 17, 0.6) 55%, rgba(14, 22, 17, 0.86) 100%); }
}

/* La page Réparation met le suivi DANS le bandeau (décision du 11/10/2026) : le titre à gauche, le panneau #suivi à droite.
   Le panneau chevauche le bord bas du bandeau et déborde sur la section suivante (« Retrouver votre suivi »), qui lui laisse la place :
   --bas est le remplissage bas du bandeau, --debord ce dont le panneau dépasse sous son bord. Le bandeau ne rogne donc
   plus (overflow visible) : la photo et son voile sont de sa taille exacte (inset 0). Sur mobile, le panneau passe sous le texte. */
/* Les deux mesures sont posées aussi sur la section suivante : une variable CSS se transmet aux enfants, pas aux voisins. */
.bandeau--suivi, .bandeau--suivi + .section { --bas: clamp(40px, 7vw, 88px); --debord: clamp(64px, 8vw, 120px); }
.bandeau--suivi { overflow: visible; padding-bottom: var(--bas); }
.bandeau__contenu--duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.bandeau--suivi .suivi { margin-bottom: calc(-1 * (var(--bas) + var(--debord))); }
.bandeau--suivi + .section { padding-top: calc(var(--section) + var(--debord)); }
/* Sur grand écran, le bandeau prend la hauteur commune (13/10/2026) : moins de marge en bas, et le panneau déborde
   d'autant plus sous le bandeau, pour rester à la même distance du menu */
@media (min-width: 1080px) {
    .bandeau--suivi.bandeau--photo, .bandeau--suivi.bandeau--photo + .section { --bas: 48px; --debord: calc(clamp(64px, 8vw, 120px) + 40px); }
}
@media (min-width: 720px) { .bandeau--suivi .suivi { max-width: 520px; } }
/* Le panneau passe à droite du titre dès 880 px (David, 15/10/2026 : sur tablette, il restait sous le texte) */
@media (min-width: 880px) {
    .bandeau__contenu--duo { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); column-gap: 40px; align-items: end; }
    .bandeau--suivi .bandeau__texte { align-self: center; }
    .bandeau--suivi .suivi { max-width: none; }
}
@media (min-width: 1080px) { .bandeau__contenu--duo { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: 64px; } }

/* La frise du cheminement (page Réparation) : du client au client, huit cartes en grille, toutes visibles sans défilement de côté
   (David, 11 octobre 2026) : 4 colonnes dès 1 080 px (deux rangées), 2 de 720 à 1 079 px, 1 en dessous. Au milieu, les six statuts
   de KronoFix, chacun avec la phrase que le client lit alors sur son suivi. Chaque carte : un repère numéroté sur le fil, puis une
   carte blanche (un visuel avec la pastille « Sur votre suivi : <statut> », le titre, le texte de l'atelier et la ligne de l'écran). */
.frise-entete { display: grid; gap: 14px; max-width: 62ch; margin-bottom: clamp(24px, 4vw, 40px); }
.frise-entete__texte { display: grid; gap: 14px; }
.frise-entete__intro { font-size: 1.0625rem; color: var(--text-2); }

.frise__liste { --ecart: 20px; list-style: none; padding: 0; display: grid; gap: 28px var(--ecart); }
@media (min-width: 720px) { .frise__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .frise__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.etape { display: grid; grid-template-rows: auto 1fr; gap: 14px; min-width: 0; }
/* Le fil : un segment par carte, du repère jusqu'au repère de la carte suivante (il traverse l'écart). Pas de segment en bout de rangée,
   ni sur mobile (une seule colonne). */
.etape__repere { position: relative; display: flex; align-items: center; height: 40px; }
.etape__repere::after { content: ''; position: absolute; left: 40px; right: calc(var(--ecart) * -1); top: 50%; height: 2px; margin-top: -1px; background: #C3CDBE; }
.etape__repere::after { display: none; }
@media (min-width: 720px) { .etape:not(:nth-child(2n)) .etape__repere::after { display: block; } }
@media (min-width: 1080px) { .etape:nth-child(2n):not(:nth-child(4n)) .etape__repere::after { display: block; } }
.etape__noeud {
    position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid var(--green); background: var(--surface); color: var(--green);
    font-family: var(--font-titre); font-size: 1.125rem; font-weight: 800; line-height: 1;
    transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* Les deux bouts du chemin, c'est le client : un repère plein. L'étape « si besoin » est en pointillés. */
.etape--client .etape__noeud { background: var(--green); color: #FFFFFF; }
.etape--si-besoin .etape__noeud { border-style: dashed; }
/* L'arrivée : la satisfaction, repère de soleil et carte bordée de vert */
.etape--fin .etape__noeud { border-color: var(--sun); background: var(--sun); color: var(--ink); box-shadow: 0 0 0 6px var(--sun-soft); }

/* La carte : blanche, bordée, le visuel au ras du haut ; le bas du corps garde la ligne de l'écran (margin-top: auto), de sorte
   que les cartes de la rangée, de même hauteur, alignent leurs écrans. */
.etape__carte {
    display: flex; flex-direction: column; overflow: hidden;
    border: 2px solid var(--line); border-radius: var(--rayon-m); background: var(--surface);
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.etape--fin .etape__carte { border-color: var(--green); box-shadow: var(--ombre-douce); }

.etape__visuel { position: relative; flex: none; height: 148px; background: var(--hero); }
/* Sur mobile, une seule colonne : le visuel devient un bandeau qui ne porte que la pastille (le disque ne reste qu'aux deux bouts du
   chemin, qui n'ont pas de pastille), pour que les huit cartes ne fassent pas quatre écrans de haut. */
@media (max-width: 719px) {
    .frise__liste { gap: 20px; }
    .etape { gap: 8px; }
    .etape__repere { height: 32px; }
    .etape__noeud { width: 32px; height: 32px; font-size: 1rem; }
    .etape__visuel { height: 64px; }
    .etape__dessin { padding-bottom: 0; }
    .etape__disque { display: none; }
    .etape__dessin--seul .etape__disque { display: grid; width: 44px; height: 44px; border-width: 3px; }
    .etape__dessin--seul .etape__disque .ico { width: 24px; height: 24px; }
    .etape__filigrane { font-size: 3.5rem; }
    .etape__pastille { top: 50%; bottom: auto; transform: translateY(-50%); }
}
.etape__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Sans photo : un dessin sobre. Un disque de soleil et une grande icône d'encre, le numéro de l'étape en filigrane en haut à droite,
   un quadrillage de traits fins, le tout sur le vert sombre du site. Le contenu est remonté pour laisser la place à la pastille. */
.etape__dessin {
    position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 44px; overflow: hidden;
    background:
        repeating-linear-gradient(135deg, rgba(221, 231, 219, 0.05) 0 1px, transparent 1px 18px),
        radial-gradient(90% 90% at 88% 0%, rgba(227, 178, 60, 0.16), transparent 62%),
        linear-gradient(160deg, var(--hero), var(--ink-2));
}
.etape__dessin--seul { padding-bottom: 0; }
.etape__filigrane {
    position: absolute; top: -0.06em; right: 0.12em;
    font-family: var(--font-titre); font-size: 5rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
    color: var(--on-dark); opacity: 0.13;
}
.etape__disque {
    display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
    border: 5px solid rgba(221, 231, 219, 0.14); background: var(--sun); color: var(--ink);
    box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.5);
}
.etape__disque .ico { width: 38px; height: 38px; }
/* La pastille : blanc opaque, encre, statut en gras ; elle passe sur deux lignes plutôt que d'être tronquée */
.etape__pastille {
    position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px);
    display: flex; align-items: center; gap: 8px; min-height: 34px; margin: 0; padding: 6px 12px;
    border-radius: 12px; background: #FFFFFF; color: var(--ink);
    box-shadow: 0 4px 14px rgba(22, 32, 26, 0.28); font-size: 0.875rem; line-height: 1.3;
}
.etape__pastille .ico { color: var(--green); }
.etape__statut { font-weight: 700; }

.etape__corps { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; }
.etape__corps > p { max-width: 46ch; font-size: 0.9375rem; color: var(--text-2); line-height: 1.5; }
.etape__titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 1.25rem; font-weight: 700; line-height: 1.15; }
.etape__si-besoin {
    padding: 2px 8px; border: 1px dashed var(--green); border-radius: 999px;
    font-family: var(--font-texte); font-size: 0.75rem; font-weight: 600; line-height: 1.4; color: var(--green);
}
/* L'écran : la ligne de la page de suivi, telle que le client la lit à ce moment-là */
.etape__corps > .etape__ecran { display: flex; align-items: flex-start; gap: 10px; margin-top: auto; padding: 10px 14px; border-radius: var(--rayon-s); background: var(--bg); font-size: 0.875rem; font-weight: 500; color: var(--ink); }
.etape__ecran .ico { margin-top: 3px; color: var(--green); }
.etape__actions { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: auto; }
/* La fin du chemin : l'avis d'un client et la note de la fiche Google */
.etape__preuve { display: grid; gap: 12px; justify-items: start; margin-top: auto; }
.etape__carte .avis { background: var(--bg); }
.avis--frise { width: auto; max-width: 440px; }
/* Dans une colonne étroite, l'avis tient en trois lignes */
.avis--frise .avis__texte p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.etape__note { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.etape__note .ico:first-child { color: var(--sun); fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
    .etape__noeud, .etape__carte { transition: none; }
}

/* Bon à savoir (page Réparation) : les engagements de l'atelier. Le diagnostic, avec ses tarifs, prend deux
   colonnes : 2 + 1 puis 3 cartes sur ordinateur, jamais une carte seule sur sa rangée. */
.engagements { display: grid; gap: 28px; }
.engagements__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.engagement { display: grid; align-content: start; gap: 10px; padding: 22px 22px 24px; border-radius: var(--rayon-m); background: var(--surface); }
.engagement p { max-width: 52ch; font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); }
.engagement__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sage); color: var(--green); }
.engagement__titre { font-size: 1.25rem; font-weight: 700; line-height: 1.15; }
.tarifs { display: grid; gap: 8px; margin: 4px 0 0; }
.tarifs div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; border-radius: var(--rayon-s); background: var(--bg); }
.tarifs dt { font-weight: 500; color: var(--text-2); }
.tarifs__exemples { display: block; font-size: 0.8125rem; font-weight: 400; }
.tarifs dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
/* Sur téléphone, les cartes à la suite (Réparation, Location, Partenaires) : l'icône passe à côté du titre, le reste
   dessous sur toute la largeur, pour les garder courtes (passe de réduction sur téléphone, 14/10/2026) */
@media (max-width: 719px) {
    .engagement { grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 18px 18px 20px; }
    .engagement__ico { width: 40px; height: 40px; }
    .engagement__titre { font-size: 1.125rem; }
    .engagement > :not(.engagement__ico, .engagement__titre, .engagement--pro__texte) { grid-column: 1 / -1; }
}
@media (min-width: 720px) {
    .engagements__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .engagement--large { grid-column: 1 / -1; }
    .tarifs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tarifs div { flex-direction: column; gap: 2px; }
}
@media (min-width: 1080px) {
    .engagements__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .engagement--large { grid-column: span 2; }
}

/* Les professionnels passent en priorité : une ligne sous les boutons du bandeau, puis une bande sombre qui ferme « Bon à savoir » */
.bandeau__pro { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 0.9375rem; color: var(--on-dark); }
.bandeau__pro .ico { flex-shrink: 0; color: var(--sun); }
.bandeau__pro strong { color: #FFFFFF; }
.engagement--pro { grid-column: 1 / -1; background: var(--hero); color: #FFFFFF; }
.engagement--pro .engagement__ico { background: var(--sun); color: var(--ink); }
.engagement--pro p { color: var(--on-dark); }
.engagement--pro .bouton { justify-self: start; }
@media (min-width: 720px) {
    .engagement--pro { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 24px 28px; }
    .engagement--pro__texte { display: grid; gap: 6px; }
}

/* Conseils de la saison (page Réparation) : le titre, les trois guides de la saison et l'entrée du blog, puis le relais vers la demande */
.saison-atelier__entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.saison-atelier__texte { display: grid; gap: 12px; max-width: 58ch; }
.saison-atelier__texte p { color: var(--text-2); }
.saison-atelier__relais { margin-top: 28px; color: var(--text-2); }
.saison-atelier__relais a { font-weight: 700; color: var(--green); }
/* Quatre cartes : les trois guides de la saison, puis l'entrée du blog (fond vert sombre). 4 colonnes dès 1 080 px, 2 × 2 de 720
   à 1 079 px ; en dessous, la rangée défile au doigt (règle plus bas) : jamais de carte seule sur une seconde ligne. */
.guides--4 { margin-top: 28px; }
@media (min-width: 720px) { .saison-atelier .guides--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .saison-atelier .guides--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Préfixés .saison-atelier : la section est blanche, et « .section--claire .carte-guide » (plus bas dans la feuille) rendrait sinon la carte pâle. */
.saison-atelier .carte-guide.carte-guide--tous { background: var(--hero); color: #FFFFFF; }
.saison-atelier .carte-guide--tous .carte-guide__corps { gap: 14px; padding: 26px 24px 22px; }
.saison-atelier .carte-guide--tous .carte-guide__titre { font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.1; }
.saison-atelier .carte-guide--tous .carte-guide__titre a, .saison-atelier .carte-guide--tous:hover .carte-guide__titre a { color: #FFFFFF; }
.saison-atelier .carte-guide--tous:hover .carte-guide__titre a { text-decoration: underline; text-underline-offset: 0.18em; }
.saison-atelier .carte-guide--tous .carte-guide__extrait { display: block; color: var(--on-dark); }
/* Les liens courts par machine, au-dessus du lien étiré de la carte (z-index) pour rester cliquables */
.tous-conseils { list-style: none; margin: 0; padding: 0; display: grid; }
.tous-conseils li + li { border-top: 1px solid rgba(221, 231, 219, 0.16); }
.tous-conseils a { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: #FFFFFF; text-decoration: none; }
.tous-conseils a:hover { color: var(--sun); }
.tous-conseils .ico { color: var(--sun); }
.saison-atelier .carte-guide--tous .carte-guide__pied { border-top-color: rgba(221, 231, 219, 0.16); }
.saison-atelier .carte-guide--tous .lien-fleche { position: relative; z-index: 1; color: var(--sun); }
.saison-atelier .carte-guide--tous .lien-fleche:hover { color: #FFFFFF; }
/* Petit écran : les trois guides défilent au doigt, sur une rangée, au lieu de prendre deux écrans de haut */
@media (max-width: 719px) {
    .saison-atelier .guides {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        margin-inline: calc(var(--gouttiere) * -1); padding: 6px var(--gouttiere) 10px; scroll-padding-inline: var(--gouttiere);
        scrollbar-width: none;
    }
    .saison-atelier .guides::-webkit-scrollbar { display: none; }
    .saison-atelier .carte-guide { scroll-snap-align: start; }
    /* Des cartes moins hautes (605 px avant) : l'extrait sur deux lignes, et la carte « Tous nos conseils » sans sa liste
       des machines, qui fixait la hauteur de toute la rangée ; la page Conseils a les mêmes onglets. */
    .saison-atelier .carte-guide__extrait { -webkit-line-clamp: 2; line-clamp: 2; }
    .saison-atelier .tous-conseils { display: none; }
}

/* La barre d'action du bas de l'écran, sous 1080 px, sur toutes les pages publiques sauf Contact (partiels/_barre_action.html.twig) :
   Appeler · l'action de la page (Préparer ma demande…), ou le numéro · Itinéraire.
   Elle glisse hors de l'écran quand barre_controller.js la cache ; cachée, elle n'est plus atteignable au clavier. */
.barre-action {
    position: fixed; z-index: 50; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
    display: flex; gap: 8px; padding: 8px;
    border-radius: 18px; background: var(--ink);
    box-shadow: 0 12px 32px rgba(22, 32, 26, 0.28);
    transition: transform 0.35s var(--ease), visibility 0s;
}
.barre-action .bouton { min-height: 48px; padding-inline: 16px; font-size: 0.9375rem; }
.barre-action__principale { flex: 1; }
.numero { white-space: nowrap; font-variant-numeric: tabular-nums; }
.barre-action--cachee { visibility: hidden; transform: translateY(calc(100% + 24px)); transition: transform 0.35s var(--ease), visibility 0s 0.35s; }
@media (min-width: 1080px) { .barre-action { display: none; } }
@media (prefers-reduced-motion: reduce) { .barre-action, .barre-action--cachee { transition: none; } }

/* Demande de réparation */
.demande { display: grid; gap: 32px; }
.demande__intro { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; color: var(--text-2); max-width: 46ch; }
.formulaire { display: grid; gap: 18px; }
/* Les deux champs d'une ligne s'alignent par le haut : l'aide sous « Téléphone » ne doit pas étirer ni décaler « Votre nom » */
.formulaire__ligne { display: grid; gap: 18px; align-items: start; }
.formulaire__rgpd { font-size: 0.875rem; color: var(--muted); max-width: 68ch; }
.formulaire__rgpd a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.formulaire .bouton { justify-self: start; }
@media (min-width: 720px) { .formulaire__ligne { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .demande { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 64px; } }

.confirmation {
    display: flex; gap: 16px; align-items: flex-start; align-self: start;
    padding: 24px; border-radius: var(--rayon-m);
    background: var(--sage); color: var(--ink);
}
.confirmation .ico { color: var(--green); }
.confirmation__titre { font-family: var(--font-titre); font-size: 1.375rem; font-weight: 700; margin-bottom: 4px; }

/*
   Page Conseils, sur téléphone : chaque article devient une ligne d'environ 110 px (passe du 14/10/2026 : dix-huit
   cartes de 475 px faisaient 9 100 px). La vignette carrée à gauche, la machine et la saison, le titre, la durée ;
   l'extrait se retire, et « Lire le conseil » aussi : toute la ligne mène à l'article (le lien du titre est étiré).
   Les trois conseils de la page Boutique (.boutique-conseils) prennent les mêmes lignes.
*/
@media (max-width: 639px) {
    :is(.blog .guides, .boutique-conseils) { gap: 10px; }
    :is(.blog, .boutique-conseils) .carte-guide { flex-direction: row; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; }
    :is(.blog, .boutique-conseils) .carte-guide__photo { flex: 0 0 88px; width: 88px; height: 88px; aspect-ratio: 1; border-radius: 10px; object-fit: cover; }
    :is(.blog, .boutique-conseils) .carte-guide .dessin-machine { --disque: 44px; }
    :is(.blog, .boutique-conseils) .carte-guide__corps { gap: 4px; min-width: 0; padding: 0; }
    :is(.blog, .boutique-conseils) .carte-guide__titre { font-size: 1.0625rem; line-height: 1.2; }
    :is(.blog, .boutique-conseils) .carte-guide__extrait,
    :is(.blog, .boutique-conseils) .carte-guide__pied .lien-fleche { display: none; }
    :is(.blog, .boutique-conseils) .carte-guide__pied { margin-top: 2px; padding-top: 0; border-top: 0; font-size: 0.8125rem; }
}

/* ---------- 14. Conseils : liste ---------- */
/* Fil d'Ariane, posé sur un bandeau sombre au-dessus du titre (partiels/_fil_ariane) */
.fil-ariane { margin-bottom: 14px; font-size: 0.875rem; }
/* Sur une ligne : s'il manque de place, c'est le titre de la page courante qui s'abrège (il est juste en dessous) */
.fil-ariane__liste { list-style: none; padding: 0; display: flex; align-items: center; color: var(--on-dark-2); }
.fil-ariane__etape { display: flex; align-items: center; flex-shrink: 0; }
.fil-ariane__etape:last-child { flex-shrink: 1; min-width: 0; }
.fil-ariane__etape + .fil-ariane__etape::before { content: '/'; flex-shrink: 0; margin-inline: 10px; color: rgba(255, 255, 255, 0.4); }
/* Des liens de 44 px de haut pour le doigt, sans pousser le titre */
.fil-ariane a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--on-dark); text-decoration: none; }
@media (hover: hover) {
    .fil-ariane a:hover { color: var(--sun); text-decoration: underline; text-underline-offset: 3px; }
}
.fil-ariane [aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le bandeau de saison : « En ce moment », entre l'en-tête et les filtres. Il ne dépend d'aucun filtre ni d'aucun script, et rien n'y bouge.
   Mobile : la photo en bandeau de 128 px, le texte, puis la liste. Dès 860 px : le texte à gauche, les conseils à droite.
   Dès 1180 px : la photo de saison en troisième colonne (en dessous, elle ne se charge pas : display none + lazy). */
.saison-en-cours { padding-top: 32px; }
.bandeau-saison {
    position: relative; display: grid; overflow: hidden;
    border-radius: var(--rayon-l); background: var(--hero); color: var(--on-dark);
}
.bandeau-saison__visuel { position: relative; height: 128px; }
.bandeau-saison__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.bandeau-saison__visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34, 57, 42, 0.15) 0%, var(--hero) 100%); }
.bandeau-saison__texte { display: grid; gap: 12px; align-content: start; justify-items: start; padding: 26px 22px 6px; }
.bandeau-saison--photo .bandeau-saison__texte { padding-top: 4px; }
.bandeau-saison:not(.bandeau-saison--liste) .bandeau-saison__texte { padding-bottom: 22px; }
.bandeau-saison__surtitre { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun); }
.bandeau-saison__titre { font-size: clamp(1.625rem, 3.4vw, 2.375rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; color: #FFFFFF; text-wrap: balance; }
.bandeau-saison__phrase { max-width: 58ch; color: var(--on-dark); }
.bandeau-saison__conseils { display: grid; justify-items: start; gap: 6px; padding: 12px 22px 22px; }
.bandeau-saison__liste { list-style: none; width: 100%; padding: 0; border-block: 1px solid rgba(255, 255, 255, 0.16); }
.bandeau-saison__liste li + li { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.bandeau-saison__conseil {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 52px; padding-block: 10px;
    color: #FFFFFF; font-weight: 700; line-height: 1.3; text-decoration: none;
}
.bandeau-saison__conseil-duree { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 0.875rem; font-weight: 400; color: var(--on-dark-2); }
.bandeau-saison__conseil:focus-visible, .bandeau-saison__tous:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); border-radius: 6px; }
@media (hover: hover) {
    .bandeau-saison__conseil:hover { color: var(--sun); }
}
@media (min-width: 860px) {
    .bandeau-saison__visuel { display: none; }
    .bandeau-saison--liste { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .bandeau-saison__texte, .bandeau-saison--photo .bandeau-saison__texte { align-content: center; padding: 36px 40px; }
    .bandeau-saison:not(.bandeau-saison--liste) .bandeau-saison__texte { max-width: 760px; }
    .bandeau-saison__conseils { align-content: center; padding: 32px 40px 32px 0; }
}
@media (min-width: 1180px) {
    .bandeau-saison--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); }
    .bandeau-saison--photo.bandeau-saison--liste { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.7fr); }
    .bandeau-saison--photo .bandeau-saison__visuel { display: block; grid-column: -2; grid-row: 1; height: auto; }
    .bandeau-saison--photo .bandeau-saison__visuel::after { background: linear-gradient(90deg, var(--hero) 0%, rgba(34, 57, 42, 0) 42%); }
}

/* La page se lit comme un blog : les filtres sur toute la largeur, puis, dès 1080 px, la grille à gauche et le top 5 à droite, qui
   commence sous la barre des catégories. L'ordre du DOM est filtres, top 5, grille : en dessous de 1080 px tout s'empile dans cet ordre. */
.blog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.blog__principal { min-width: 0; }
@media (min-width: 1080px) {
    .blog { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 56px; row-gap: 36px; }
    .blog > .filtres { grid-column: 1 / -1; }
    .blog__principal { grid-column: 1; grid-row: 2; }
    .blog > .top-conseils { grid-column: 2; grid-row: 2; align-self: start; position: sticky; top: 24px; }
    .blog .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
    .blog .guides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Filtres : le nombre de conseils et la saison (liste déroulante) en tête, les machines en onglets de texte dessous */
.filtres { display: grid; gap: 12px; }
.filtres__entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.filtres__resume { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.filtres__nombre { font-family: var(--font-titre); font-size: 1.375rem; font-weight: 700; }
/* « Tout voir » : le seul moyen de quitter le filtre de catégorie, un lien discret (pas de pastille) */
.filtres__tout {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--green); font-size: 0.9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.filtres__tout:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); border-radius: 6px; }
.onglets {
    display: flex; gap: 4px;
    overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--line);
}
.onglets::-webkit-scrollbar { display: none; }
/* Les catégories en grand, dans la police des titres */
.onglet {
    display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
    min-height: 60px; padding: 0 18px;
    border-bottom: 4px solid transparent;
    color: var(--muted); font-family: var(--font-titre); font-size: 1.3125rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.onglet:first-child { padding-left: 2px; }
.onglet[aria-current="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--green); }
.onglet:focus-visible { outline: 3px solid var(--sun); outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--ink); border-radius: 6px; }
@media (hover: hover) {
    .onglet:hover { color: var(--ink); }
}
.filtres__saison { display: flex; align-items: center; gap: 10px; }
.liste-deroulante { position: relative; display: inline-flex; }
.liste-deroulante select {
    appearance: none;
    min-height: 44px; padding: 0 38px 0 14px;
    border: 1px solid var(--line); border-radius: var(--rayon-s);
    background: var(--surface); color: var(--ink);
    font: inherit; font-size: 0.9375rem; font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s var(--ease);
}
@media (hover: hover) {
    .liste-deroulante select:hover { border-color: var(--green); }
}
.liste-deroulante select:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
.liste-deroulante .ico { position: absolute; right: 12px; top: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; }
@media (max-width: 479px) {
    .filtres__nombre { font-size: 1.125rem; }
}
@media (max-width: 1079px) {
    /* Les onglets défilent sous le pouce : le fondu à droite dit qu'il y en a d'autres */
    .onglets { margin-right: calc(-1 * var(--gouttiere)); padding-right: var(--gouttiere); mask-image: linear-gradient(90deg, #000 80%, transparent); }
}

/* Puces radio (robots) */
.puce {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    min-height: 48px; padding: 0 20px;
    border: 2px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink);
    font-size: 0.9375rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
@media (hover: hover) {
    .puce:hover { border-color: var(--green); color: var(--ink); }
}

.guides { list-style: none; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.carte-guide {
    position: relative;
    display: flex; flex-direction: column;
    border-radius: var(--rayon-m); overflow: hidden;
    background: var(--surface);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.carte-guide:has(a:focus-visible) { outline: 3px solid var(--sun); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ink); }
.carte-guide[hidden] { display: none; }
.carte-guide__photo { aspect-ratio: 16 / 10; }
img.carte-guide__photo { display: block; width: 100%; height: auto; object-fit: cover; }
.carte-guide__corps { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 18px; }
/* Machine et saison en surtitre, plutôt qu'en pastilles */
.carte-guide__sur { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.carte-guide__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 0.875rem; color: var(--muted); }
.carte-guide__machine, .carte-guide__duree { display: inline-flex; align-items: center; gap: 6px; }
.carte-guide__titre { font-size: 1.3125rem; font-weight: 700; line-height: 1.15; }
.carte-guide__titre a { color: var(--ink); text-decoration: none; }
.carte-guide__titre a::after { content: ''; position: absolute; inset: 0; }
.carte-guide__titre a:focus-visible { outline: none; box-shadow: none; }
.carte-guide__extrait { color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carte-guide__pied {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line);
    font-size: 0.875rem; color: var(--muted);
}
.carte-guide__pied .lien-fleche { font-size: 0.9375rem; }
@media (hover: hover) {
    .carte-guide:hover { transform: translateY(-3px); box-shadow: var(--ombre-douce); }
    .carte-guide:hover .carte-guide__titre a { color: var(--green); }
    .carte-guide:hover .lien-fleche .ico:last-child { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .carte-guide:hover { transform: none; }
}
.guides--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin-top: 28px; }
.section--claire .carte-guide { background: var(--bg); }

.guides-vide { display: grid; gap: 12px; justify-items: start; padding: 32px; border-radius: var(--rayon-m); background: var(--surface); }
.guides-vide[hidden] { display: none; }
.guides-vide__titre { font-family: var(--font-titre); font-size: 1.375rem; font-weight: 700; }

/* Le top 5 : une colonne verticale à droite de la grille dès 1080 px (collante, sous la barre des catégories), les articles de la saison
   d'abord ; en dessous, une carte pleine largeur entre la barre et la grille. Numéroté comme un palmarès, un filet entre les entrées. */
.top-conseils { padding: 26px 26px 10px; border-radius: var(--rayon-l); background: var(--surface); }
.top-conseils__titre { font-size: 1.625rem; font-weight: 800; line-height: 1.1; }
.top-conseils__intro { margin-top: 4px; font-size: 0.9375rem; color: var(--muted); }
.top-conseils__liste { list-style: none; padding: 0; margin-top: 12px; }
.top-conseils__item { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding-block: 16px; }
.top-conseils__item + .top-conseils__item { border-top: 1px solid var(--line); }
.top-conseils__item:has(a:focus-visible) { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); border-radius: 8px; }
.top-conseils__rang { font-family: var(--font-titre); font-size: 2rem; font-weight: 800; line-height: 0.9; color: var(--green); }
.top-conseils__lien { color: var(--ink); font-weight: 700; line-height: 1.3; text-decoration: none; }
.top-conseils__lien::after { content: ''; position: absolute; inset: 0; }
.top-conseils__lien:focus-visible { outline: none; box-shadow: none; }
@media (hover: hover) {
    .top-conseils__item:hover .top-conseils__lien { color: var(--green); }
}
.top-conseils__meta { margin-top: 6px; font-size: 0.8125rem; color: var(--muted); }
.top-conseils__saison { display: inline-flex; align-items: center; gap: 4px; color: var(--sun-ink); font-weight: 700; }

/* L'encart de l'atelier ferme la page, en bande : le texte à gauche, les boutons à droite */
.encart-atelier.encart-atelier--bande { margin-top: 48px; }
.encart-atelier__actions { display: grid; gap: 10px; }
@media (min-width: 720px) {
    .encart-atelier.encart-atelier--bande { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 36px; }
    .encart-atelier.encart-atelier--bande .encart-atelier__actions { display: flex; flex-shrink: 0; gap: 12px; }
    .encart-atelier.encart-atelier--bande .bouton { width: auto; }
}

/* ---------- 15. Conseils : un guide ---------- */
.guide__entete { background: var(--ink); color: #FFFFFF; padding-block: calc(var(--entete-h) + 24px) clamp(96px, 12vw, 140px); }
.guide__entete .carte-guide__meta { color: var(--on-dark-2); margin-top: 20px; }
.guide__titre { margin-top: 16px; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; max-width: 22ch; }
.guide__chapo { margin-top: 18px; max-width: 60ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--on-dark); }
/* Avec la photo des Conseils en fond : voile sombre pour le texte blanc. La photo de l'article, qui chevauche le bas
   de l'en-tête, est positionnée pour passer au-dessus du voile. */
.guide__entete--photo { position: relative; overflow: hidden; }
.guide__entete-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guide__entete--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 22, 17, 0.78) 0%, rgba(14, 22, 17, 0.88) 100%); }
.guide__entete--photo > .conteneur { position: relative; z-index: 1; }
.guide__photo { position: relative; height: clamp(220px, 34vw, 420px); margin-top: clamp(-120px, -9vw, -72px); border-radius: var(--rayon-l); }
img.guide__photo { display: block; width: 100%; object-fit: cover; }

/* Sous la bannière : le texte (sommaire puis corps) à gauche, la colonne collante à droite dès 1080 px.
   Sur mobile, une seule colonne, dans l'ordre du DOM : sommaire, texte, épisode suivant, catégories, derniers, atelier. */
.guide__mise-en-page { display: grid; gap: 48px; padding-block: clamp(32px, 5vw, 56px) var(--section); }
.guide__principal { min-width: 0; }

/* Le sommaire : un <details> (replié sur mobile par le contrôleur « sommaire »), puis la liste numérotée à plat.
   Le chevron change d'état sans animation. */
.sommaire { margin-bottom: 40px; border-radius: var(--rayon-m); background: var(--surface); }
.sommaire__resume {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 56px; padding: 6px 24px;
    list-style: none; cursor: pointer;
}
.sommaire__resume::-webkit-details-marker { display: none; }
.sommaire__titre { font-family: var(--font-titre); font-size: 1.375rem; font-weight: 700; line-height: 1.15; }
.sommaire__chevron { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; color: var(--green); }
.sommaire[open] .sommaire__chevron { transform: rotate(180deg); }
.sommaire__nav { padding: 0 24px 14px; }
.sommaire__liste { list-style: none; padding: 0; }
.sommaire__item { display: flex; align-items: baseline; gap: 10px; border-top: 1px solid var(--line); }
.sommaire__item:first-child { border-top: 0; }
.sommaire__numero { flex-shrink: 0; min-width: 2ch; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.sommaire__item a { display: flex; align-items: center; flex: 1; min-width: 0; min-height: 44px; padding-block: 8px; color: var(--ink); font-weight: 500; line-height: 1.3; text-decoration: none; }
/* Les sous-titres (h3) sont en retrait, un cran plus discrets */
.sommaire__item--niveau-3 { padding-left: 28px; }
.sommaire__item--niveau-3 .sommaire__numero { font-weight: 500; color: var(--muted); }
.sommaire__item--niveau-3 a { font-size: 0.9375rem; font-weight: 400; color: var(--text-2); }
@media (hover: hover) {
    .sommaire__item a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 0.2em; }
}

/* Le corps de l'article : le HTML de l'éditeur riche (p, h2, h3, ul, ol, li, strong, em, a, br), 68 caractères par ligne au plus */
:is(.guide__texte, .texte-legal) { max-width: 68ch; }
:is(.guide__texte, .texte-legal) > * + * { margin-top: 1.125rem; }
:is(.guide__texte, .texte-legal) [id] { scroll-margin-top: 24px; }
:is(.guide__texte, .texte-legal) h2 { font-size: clamp(1.625rem, 3vw, 2.125rem); font-weight: 700; line-height: 1.15; margin-bottom: 24px; }
:is(.guide__texte, .texte-legal) h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 700; line-height: 1.2; margin-bottom: 12px; }
:is(.guide__texte, .texte-legal) > * + h2 { margin-top: 3rem; }
:is(.guide__texte, .texte-legal) > * + h3 { margin-top: 2rem; }
:is(.guide__texte, .texte-legal) > h2 + *, :is(.guide__texte, .texte-legal) > h3 + * { margin-top: 0; }
:is(.guide__texte, .texte-legal) ul, :is(.guide__texte, .texte-legal) ol { padding-left: 1.5em; }
:is(.guide__texte, .texte-legal) ul { list-style: disc; }
:is(.guide__texte, .texte-legal) ol { list-style: decimal; }
:is(.guide__texte, .texte-legal) li { padding-left: 0.25em; }
:is(.guide__texte, .texte-legal) li + li { margin-top: 0.625rem; }
:is(.guide__texte, .texte-legal) li::marker { color: var(--green); font-weight: 700; }
:is(.guide__texte, .texte-legal) strong { font-weight: 700; }
:is(.guide__texte, .texte-legal) a { color: var(--green); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* Les pages légales (Mentions légales, Confidentialité) : la typographie des conseils (ci-dessus, déjà partagée), une fiche
   d'identité, le tableau des cookies (en cartes sous 560 px) et, en jaune, les mentions que le BO n'a pas encore remplies */
.legal { padding-block: clamp(32px, 5vw, 56px) var(--section); }
.texte-legal dl { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 10px 24px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon-s); }
.texte-legal dt { font-weight: 700; color: var(--text-2); }
.texte-legal dd { margin: 0; overflow-wrap: anywhere; }
.tableau-legal { width: 100%; border-collapse: collapse; font-size: 0.9375rem; background: var(--surface); }
.tableau-legal th, .tableau-legal td { padding: 12px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.tableau-legal thead th { background: var(--sage); color: var(--text-2); }
.tableau-legal tbody th { font-weight: 700; }
.a-completer { padding: 0 0.3em; border-radius: 4px; background: var(--sun-soft); color: var(--sun-ink); font-weight: 700; }
.texte-legal__maj { padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--muted); }
@media (max-width: 559px) {
    .texte-legal dl { grid-template-columns: 1fr; gap: 2px; padding: 16px; }
    .texte-legal dd + dt { margin-top: 12px; }
    .tableau-legal, .tableau-legal tbody, .tableau-legal tr, .tableau-legal th, .tableau-legal td { display: block; }
    .tableau-legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .tableau-legal { background: none; }
    .tableau-legal tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon-s); padding: 6px 16px; }
    .tableau-legal tr + tr { margin-top: 12px; }
    .tableau-legal th, .tableau-legal td { border: 0; padding: 8px 0; }
    .tableau-legal tbody th { font-size: 1rem; }
    .tableau-legal td::before { content: attr(data-libelle); display: block; font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
}

/* La colonne de droite : l'épisode suivant, deux listes de texte, puis l'encart de l'atelier. */
.guide__cote { display: grid; gap: 40px; min-width: 0; }
/* Le titre d'un bloc de la colonne : petites capitales vertes, comme le surtitre d'une carte */
.cote__titre { font-family: var(--font-texte); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; color: var(--green); }

/* L'épisode suivant : toute la carte est cliquable (le lien du titre s'étend, comme .carte-guide__titre a::after) */
.episode-suivant { position: relative; display: flex; flex-direction: column; border-radius: var(--rayon-m); overflow: hidden; background: var(--surface); }
.episode-suivant:has(a:focus-visible) { outline: 3px solid var(--sun); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ink); }
.episode-suivant > .cote__titre { padding: 18px 20px 14px; }
.episode-suivant__photo { aspect-ratio: 16 / 10; }
img.episode-suivant__photo { display: block; width: 100%; height: auto; object-fit: cover; }
.episode-suivant__corps { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 20px 12px; }
.episode-suivant__titre { font-size: 1.25rem; font-weight: 700; line-height: 1.15; }
.episode-suivant__titre a { color: var(--ink); text-decoration: none; }
.episode-suivant__titre a::after { content: ''; position: absolute; inset: 0; }
.episode-suivant__titre a:focus-visible { outline: none; box-shadow: none; }
.episode-suivant__extrait { font-size: 0.9375rem; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) {
    .episode-suivant:hover .episode-suivant__titre a { color: var(--green); }
    .episode-suivant:hover .lien-fleche .ico:last-child { transform: translateX(4px); }
}

/* Sur téléphone, sous l'article (passe du 14/10/2026 : la colonne faisait 1 380 px) : l'épisode suivant en ligne, vignette
   à gauche et sans extrait ; les catégories se retirent, la page Conseils les a en onglets. */
@media (max-width: 639px) {
    .episode-suivant { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; padding: 0 14px 14px; }
    .episode-suivant > .cote__titre { grid-column: 1 / -1; padding: 16px 0 10px; }
    .episode-suivant .episode-suivant__photo { width: 88px; height: 88px; aspect-ratio: 1; border-radius: 10px; object-fit: cover; }
    .episode-suivant .dessin-machine { --disque: 44px; }
    .episode-suivant__corps { justify-content: center; gap: 6px; padding: 0; }
    .episode-suivant__titre { font-size: 1.0625rem; }
    .episode-suivant__extrait { display: none; }
    .cote-categories { display: none; }
}

/* Catégories et derniers conseils : des listes de texte sous filet, une cible de 44 px par ligne */
.cote-liste { list-style: none; padding: 0; margin-top: 10px; border-top: 1px solid var(--line); }
.cote-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.cote-liste a { display: flex; align-items: center; flex: 1; min-width: 0; min-height: 44px; padding-block: 8px; color: var(--ink); font-weight: 500; line-height: 1.3; text-decoration: none; }
.cote-liste__nombre { margin-left: 6px; color: var(--muted); font-weight: 400; }
.cote-liste__duree { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
@media (hover: hover) {
    .cote-liste a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 0.2em; }
}

.encart-atelier {
    display: flex; flex-direction: column; gap: 14px; align-self: start;
    padding: 28px;
    border-radius: var(--rayon-l);
    background: var(--ink); color: var(--on-dark);
}
.encart-atelier__titre { font-family: var(--font-titre); font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: #FFFFFF; }
.encart-atelier .bouton { width: 100%; }
/* Petit téléphone : un peu moins de marge, pour que « Confier ma machine à l'atelier » tienne sur une ligne dès 360 px */
@media (max-width: 479px) {
    .encart-atelier { padding: 22px 20px; }
    .encart-atelier .bouton { padding-inline: 14px; }
}

@media (min-width: 1080px) {
    .guide__mise-en-page { grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; }
    /* La colonne suit la lecture. Plus haute que l'écran, elle reste collée en haut et son bas (l'encart de
       l'atelier) apparaît quand on arrive à la fin de l'article : pas d'ascenseur imbriqué. */
    .guide__cote { position: sticky; top: 24px; align-self: start; }
    /* Le sommaire n'est plus repliable : un simple bloc au-dessus du texte (le contrôleur garde aussi <details> ouvert) */
    .sommaire__resume { pointer-events: none; cursor: default; }
    .sommaire__chevron { display: none; }
}

/* ---------- 16. Pied de page ---------- */
.pied { background: var(--ink); color: #C9D4C7; font-size: 0.9375rem; }
/* La marque et les horaires en haut, les liens légaux en bas sous un filet */
.pied__interieur {
    display: grid; gap: 32px;
    max-width: calc(1264px + 2 * var(--gouttiere));
    margin-inline: auto;
    padding: 48px var(--gouttiere) 24px;
}
@media (min-width: 900px) { .pied__interieur { grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; align-items: start; } }
.pied__marque { display: grid; gap: 6px; }
/* Le logo de l'atelier, comme dans l'en-tête */
.pied__logo { display: block; width: auto; height: 52px; margin-bottom: 8px; }
.pied a { color: #C9D4C7; }
.pied a:hover { color: var(--sun); }
.pied__horaires { display: grid; gap: 12px; }
.pied__titre { font-family: var(--font-titre); font-size: 1.125rem; font-weight: 700; color: #FFFFFF; }
/* Dans le pied, les horaires en tableau : les jours d'un côté, les heures de l'autre */
.pied .horaires { grid-template-columns: auto auto; gap: 6px 24px; }
.pied .horaires__ligne { display: contents; }
.pied .horaires dt { color: #FFFFFF; }
.pied__liens { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 24px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.pied__liens a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.pied__liens a:hover { text-decoration: underline; }
.pied__cookies { /* le lien « Cookies » rouvre le bandeau : un bouton habillé comme ses voisins */
    display: inline-flex; align-items: center; min-height: 44px; padding: 0;
    border: 0; background: none; color: #C9D4C7; font: inherit; cursor: pointer;
}
.pied__cookies:hover { color: var(--sun); text-decoration: underline; }
.pied__cookies[hidden] { display: none; }

/* ---------- L'apparition au défilement (contrôleur « reveal ») ----------
   Seule la classe « reveal-pret », posée par le contrôleur, cache les blocs marqués data-reveal
   avant leur tour : sans JavaScript ou avec « réduire les animations », tout est visible d'emblée.
   Un groupe (data-reveal="groupe") fait apparaître ses enfants l'un après l'autre (--reveal-delai).
   Un bloc repart quand il quitte l'écran et revient quand on y repasse. */
.reveal-pret [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.reveal-pret [data-reveal].est-visible { opacity: 1; transform: none; transition-duration: 0.7s; }
.reveal-pret [data-reveal="groupe"] { opacity: 1; transform: none; transition: none; }
.reveal-pret [data-reveal="groupe"] > * { opacity: 0; transform: translateY(18px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.reveal-pret [data-reveal="groupe"].est-visible > * { opacity: 1; transform: none; transition: opacity 0.7s var(--ease) var(--reveal-delai, 0ms), transform 0.7s var(--ease) var(--reveal-delai, 0ms); }
/* La sortie (le « reveal inverse ») : plus courte que l'entrée et sans décalage entre les cartes ; un bloc sorti par le
   haut remonte en s'effaçant, un bloc sorti par le bas redescend (la règle de base). */
.reveal-pret [data-reveal].est-passe, .reveal-pret [data-reveal="groupe"].est-passe > * { transform: translateY(-18px); }
.reveal-pret [data-reveal="groupe"].est-passe { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal-pret [data-reveal], .reveal-pret [data-reveal="groupe"] > * { opacity: 1; transform: none; transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Chantier du 12/10/2026. Chaque branche écrit UNIQUEMENT dans sa section.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── [boutique] Page Boutique publique et catégories ── début ── */
/* La page /boutique : une colonne de filtres à gauche, celle de la page Robots (.catalogue, .filtre, .case) ; les cartes
   sont les .carte-produit des robots, sans bouton « Ce robot m'intéresse » (voir partiels/_carte_produit_boutique.html.twig).
   Les produits sont rangés par catégorie principale : un bloc (.boutique-groupe) avec son titre et sa grille. */
.boutique-groupe { margin-top: clamp(28px, 4vw, 48px); }
.catalogue__entete + .boutique-groupe { margin-top: 8px; }
/* Quand les filtres masquent toutes les cartes d'un bloc (attribut hidden, posé par le serveur ou par le contrôleur), son titre disparaît aussi */
.boutique-groupe:not(:has(.grille-produits > li:not([hidden]))) { display: none; }
.boutique-groupe__titre { margin: 0 0 20px; }

/* La grille : une carte ne dépasse jamais sa colonne, même avec un nom très long */
.boutique-groupe .grille-produits > li { min-width: 0; }
.carte-produit--boutique .carte-produit__titre { overflow-wrap: anywhere; }
/* Description courte : trois lignes au plus ; le pied de carte (prix) reste collé en bas, quelle que soit la hauteur de la carte */
.carte-produit__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin-bottom: 4px; font-size: 0.875rem; color: var(--muted); }
.carte-produit--boutique .carte-produit__pied { margin-top: auto; }
/* « Voir la fiche » descend avec le pied : les deux restent collés en bas de la carte, alignés d'une carte à l'autre */
.carte-produit--boutique .carte-produit__fiche { align-self: flex-start; margin-top: auto; color: var(--green); font-weight: 700; }
.carte-produit--boutique .carte-produit__fiche + .carte-produit__pied { margin-top: 0; }
/* Toute la carte est cliquable (David, 12/10/2026) : le bouton rond reste le seul lien (un seul arrêt au clavier, nommé
   « Voir … »), et sa zone s'étend à la carte entière. La photo avance un peu au survol, le bouton fonce. */
.carte-produit--boutique:has(.carte-produit__bouton) { position: relative; cursor: pointer; }
.carte-produit--boutique .carte-produit__bouton { position: static; }
.carte-produit--boutique .carte-produit__bouton::before { inset: 0; z-index: 1; border-radius: 10px; }
/* Pas de scale sur le bouton à l'appui : un transform fait du bouton le repère de son ::before, la zone retombe à 40 px
   sous le doigt, le relâcher tombe hors du lien et le navigateur annule le clic. L'effet « pressé » passe sur la flèche. */
.carte-produit--boutique .carte-produit__bouton:active { transform: none; }
.carte-produit--boutique .carte-produit__bouton:active .ico { transform: scale(0.88); }
.carte-produit--boutique .carte-produit__bouton:focus-visible { outline: none; box-shadow: none; }
.carte-produit--boutique:has(.carte-produit__bouton:focus-visible) { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
.carte-produit--boutique .carte-produit__visuel img { transition: transform 0.4s var(--ease); }
@media (hover: hover) {
    .carte-produit--boutique:has(.carte-produit__bouton):hover .carte-produit__visuel img { transform: scale(1.05); }
    .carte-produit--boutique:has(.carte-produit__bouton):hover .carte-produit__bouton { background: var(--green-dark); }
    .carte-produit--boutique:hover .carte-produit__fiche .ico:last-child { transform: translateX(4px); }
}
/* L'accueil de la boutique (/boutique sans filtre) : bandeau partenaire, tuiles de catégories, lignes défilantes, services. */
.boutique-accueil__titre { margin-bottom: 20px; }
/* Sous les tuiles de « Que cherchez-vous ? » : « Tout le catalogue : » puis les logos du catalogue d'une marque, sur la même ligne
   (sur téléphone, les logos passent dessous, en ligne qui défile) */
.boutique-accueil__catalogues { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 24px; }
.boutique-accueil__catalogues-titre { margin: 0; font-family: var(--font-titre); font-size: 1.125rem; font-weight: 700; }
.boutique-accueil__tous { margin-top: 12px; }

/* Le bandeau partenaire : le visuel officiel, le texte posé à droite (le produit est à gauche sur l'image). Sous 1 200 px
   la photo passe au-dessus du texte, sinon il couvrirait le produit ; sur téléphone elle est recadrée en 16:9. */
.partenaire { padding-block: 24px 8px; }
.partenaire__cadre { position: relative; overflow: hidden; display: grid; border-radius: var(--rayon-m); background: var(--ink); color: #FFFFFF; }
.partenaire__photo { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 414; object-fit: cover; object-position: 12% 50%; }
.partenaire__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 24px 28px; }
.partenaire__surtitre { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun); }
.partenaire__titre { font-size: clamp(1.625rem, 2.6vw, 2.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
.partenaire__phrase { max-width: 44ch; color: var(--on-dark); }
.partenaire__texte .bouton { margin-top: 6px; }
@media (max-width: 719px) { .partenaire__photo { aspect-ratio: 2 / 1; object-position: 30% 50%; } }
@media (min-width: 1200px) {
    .partenaire__cadre--photo { display: block; }
    .partenaire__cadre--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 22, 17, 0.04) 0%, rgba(14, 22, 17, 0.3) 42%, rgba(14, 22, 17, 0.86) 100%); }
    .partenaire__cadre--photo .partenaire__texte { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: min(46%, 560px); justify-content: center; padding: 20px 48px 20px 24px; }
}

/* Le bandeau de l'accueil : titre et recherche, compacts pour tenir au premier écran
   (1280 × 800 comme 375 px). Avec une photo, il prend la hauteur commune des bandeaux (13/10/2026). */
.bandeau--boutique { padding-block: calc(var(--entete-h) + clamp(16px, 2.5vw, 32px)) clamp(24px, 3vw, 36px); }
.bandeau--boutique .bandeau__titre { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
.boutique-recherche { display: flex; gap: 8px; max-width: 640px; margin-top: 18px; }
.boutique-recherche__champ { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 12px 16px; border: 2px solid transparent; border-radius: var(--rayon-s); background: #FFFFFF; color: var(--ink); font-size: 1rem; }
.boutique-recherche__champ::placeholder { color: #5F6B63; }
.boutique-recherche__champ:focus { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
.boutique-recherche__bouton { flex: none; }
/* Sur téléphone, le bouton ne garde que la loupe (le libellé reste lu par les lecteurs d'écran) */
@media (max-width: 479px) {
    .boutique-recherche__libelle { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .boutique-recherche__bouton { padding-inline: 16px; }
}

/* La bande de garanties : quatre faits établis, un picto chacun */
.boutique-garanties { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.boutique-garantie { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.boutique-garantie__icone { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--sage); color: var(--green); }
.boutique-garantie p { display: grid; gap: 2px; min-width: 0; }
.boutique-garantie strong { font-family: var(--font-titre); font-size: 1.0625rem; line-height: 1.2; }
.boutique-garantie p > span { font-size: 0.875rem; color: var(--muted); }

/* « Que cherchez-vous ? » : de grandes tuiles de catégorie (photo, nom bien visible, nombre de produits), avec dessous les
   sous-catégories qui ont des produits. Deux colonnes sur mobile, trois dès 640 px, puis autant que la largeur le permet. */
.boutique-tuiles { list-style: none; padding: 0; display: grid; align-items: stretch; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .boutique-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 960px) { .boutique-tuiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
/* Toutes les tuiles d'une rangée ont la même hauteur : la grille étire les cartes, le cadre photo a un ratio fixe (4:3) et
   l'image y est posée en absolu, contenue (un max-height en % ne se résout pas en grille : le souffleur dorsal très haut
   étirait sa tuile, la tronçonneuse très plate la rétrécissait). Le bloc texte commence donc au même niveau partout. */
.boutique-categorie { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--rayon-m); background: var(--surface); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.boutique-categorie:hover { border-color: #C9D2C4; box-shadow: var(--ombre-douce); }
.boutique-categorie:has(.boutique-tuile:focus-visible) { outline: 3px solid var(--sun); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ink); }
.boutique-tuile { display: flex; flex-direction: column; flex: 0 0 auto; color: inherit; text-decoration: none; }
.boutique-tuile:focus-visible { outline: none; box-shadow: none; }
.boutique-tuile__visuel { --marge: 14px; position: relative; display: block; aspect-ratio: 4 / 3; background: #FFFFFF; color: var(--muted); }
.boutique-tuile__visuel > .ico { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.boutique-tuile__visuel img { position: absolute; inset: var(--marge); width: calc(100% - 2 * var(--marge)); height: calc(100% - 2 * var(--marge)); object-fit: contain; transition: transform 0.4s var(--ease); }
@media (hover: hover) { .boutique-categorie:hover .boutique-tuile__visuel img { transform: scale(1.05); } }
.boutique-tuile__nom { min-height: 2.2em; padding: 14px 16px 0; border-top: 1px solid var(--line); font-family: var(--font-titre); font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.boutique-tuile__nombre { padding: 4px 16px 12px; font-size: 0.875rem; color: var(--muted); }
.boutique-sous { list-style: none; margin: 0; padding: 0 16px 12px; display: grid; }
.boutique-sous a { display: flex; align-items: center; min-height: 36px; color: var(--green); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.boutique-sous a:hover { text-decoration: underline; text-underline-offset: 3px; }
.boutique-sous__nombre { margin-left: 6px; font-weight: 400; color: var(--muted); }
@media (pointer: coarse) { .boutique-sous a { min-height: 44px; } }

/* Une ligne défilante par catégorie : défilement natif (scroll-snap), les flèches n'apparaissent qu'avec JavaScript, sur
   ordinateur, et seulement s'il y a quelque chose à défiler. Sur mobile, la ligne déborde jusqu'au bord de l'écran. */
.boutique-rangee { padding-block: clamp(20px, 3vw, 32px); }
.boutique-rangee__entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 24px; margin-bottom: 16px; }
.boutique-rangee__outils { display: flex; align-items: center; gap: 16px; }
.boutique-rangee__fleches { display: none; gap: 8px; }
.boutique-rangee__fleche { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.boutique-rangee__fleche:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.boutique-rangee__fleche:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
.boutique-rangee__fleche:disabled { opacity: 0.4; cursor: default; }
@media (min-width: 960px) { .boutique-rangee__fleches:not([hidden]) { display: flex; } }
.boutique-rangee__piste { list-style: none; display: flex; gap: 16px; margin: 0 calc(-1 * var(--gouttiere)); padding: 4px var(--gouttiere) 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gouttiere); scrollbar-width: thin; }
.boutique-rangee__item { flex: 0 0 min(72vw, 260px); min-width: 0; scroll-snap-align: start; }
.boutique-rangee__item > .carte-produit { height: 100%; }
.boutique-rangee__item--tout { display: flex; }
.boutique-rangee__tout { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; width: 100%; padding: 20px; border: 2px dashed var(--line); border-radius: 10px; color: var(--green); font-family: var(--font-titre); font-size: 1.125rem; font-weight: 700; line-height: 1.2; text-decoration: none; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
.boutique-rangee__tout:hover { border-color: var(--green); background: var(--surface); }
.boutique-rangee__tout:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ink); }

/* « Comment ça marche ? » : trois étapes numérotées */
.boutique-etapes { list-style: none; padding: 0; display: grid; gap: 14px; }
@media (min-width: 860px) { .boutique-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.boutique-etape { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.boutique-etape__numero { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--sun); color: var(--ink); font-family: var(--font-titre); font-size: 1.375rem; font-weight: 800; }
.boutique-etape__titre { margin-bottom: 6px; font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.boutique-etape p { color: var(--text-2); }
.boutique-etape p a { color: var(--green); font-weight: 700; }
.boutique-etapes__note { margin-top: 18px; font-weight: 600; color: var(--text-2); }

/* Nos marques : le logo, sinon le nom en lettres capitales ; un lien seulement si la marque a des produits.
   Des tuiles égales et compactes (David, 13/10/2026) : trois de front sur téléphone. */
.boutique-marques { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .boutique-marques { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } }
.boutique-marque { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 60px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-family: var(--font-titre); font-size: 1rem; font-weight: 700; text-transform: uppercase; text-decoration: none; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
a.boutique-marque:hover { border-color: var(--green); color: var(--green); }
.boutique-marque__logo { display: block; width: auto; height: 28px; max-width: 100%; object-fit: contain; }
@media (min-width: 720px) {
    .boutique-marque { min-height: 72px; padding: 12px 16px; }
    .boutique-marque__logo { height: 36px; }
}

/* Les trois conseils : les cartes de la page Conseils, trois de front dès 860 px */
.boutique-conseils { margin-top: 24px; }
@media (min-width: 860px) { .boutique-conseils { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Votre magasin : les coordonnées à gauche, ce que fait l'atelier à droite (ce qui est acheté ici s'entretient ici) */
.boutique-accueil__sous { margin-top: 4px; }
.boutique-magasin { display: grid; gap: 20px; margin-top: 24px; }
@media (min-width: 960px) { .boutique-magasin { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.boutique-services { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.boutique-services__texte { display: grid; gap: 8px; max-width: 56ch; color: var(--text-2); }
.boutique-services__titre { font-size: 1.375rem; font-weight: 700; color: var(--ink); }
.boutique-services__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Les centimes en exposant, sur les cartes et la fiche de la boutique (partiels/_prix.html.twig, « exposant ») */
.prix-centimes { position: relative; top: -0.55em; margin-left: 1px; font-size: 0.6em; font-weight: 600; vertical-align: baseline; }

/*
   La boutique sur téléphone, sur le modèle du parcours mobile de la boutique de D'Panne Phones (« façon Amazon »,
   David, 14/10/2026), aux couleurs et aux polices de Mecaculture : les atouts en deux colonnes, les catégories en
   rangée qui défile, deux cartes par écran dans les rangées, et dans le catalogue une ligne par produit, la photo à
   gauche et le prix en grand (centimes en exposant). Aucun texte n'est réécrit ; l'ordinateur ne change pas.
*/
@media (max-width: 639px) {
    .boutique-garanties { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .boutique-garantie { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
    .boutique-garantie__icone { width: 36px; height: 36px; }
    .boutique-garantie strong { font-size: 0.9375rem; }
    .boutique-garantie p > span { font-size: 0.8125rem; line-height: 1.35; }

    /* « Que cherchez-vous ? » : un peu moins de trois catégories par écran (la suivante dépasse), les mots longs coupés à la française ; les sous-catégories sont dans les filtres du catalogue */
    .boutique-tuiles {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 34%; gap: 10px;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
        margin-inline: calc(var(--gouttiere) * -1); padding: 2px var(--gouttiere) 8px; scroll-padding-inline: var(--gouttiere);
        scrollbar-width: none;
    }
    .boutique-tuiles::-webkit-scrollbar { display: none; }
    .boutique-categorie { scroll-snap-align: start; }
    .boutique-tuile__visuel { --marge: 8px; aspect-ratio: 1; }
    .boutique-tuile__nom { min-height: 0; padding: 8px 10px 0; font-size: 0.875rem; line-height: 1.15; overflow-wrap: normal; hyphens: auto; }
    .boutique-tuile__nombre { padding: 2px 10px 8px; font-size: 0.75rem; }
    .boutique-sous { display: none; }

    /* Les rangées : deux cartes par écran, photo de 128 px, le nom sur deux lignes, le prix */
    .boutique-rangee__piste { gap: 10px; }
    .boutique-rangee__item { flex-basis: calc(50% - 5px); }
    .boutique-rangee .carte-produit__visuel { aspect-ratio: auto; height: 128px; padding: 8px; }
    .boutique-rangee .carte-produit__corps { gap: 4px; padding: 0 10px 10px; }
    .boutique-rangee .carte-produit__titre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 0.9375rem; }
    .boutique-rangee .carte-produit__desc,
    .boutique-rangee .carte-produit__fiche,
    .boutique-rangee .carte-produit__mention { display: none; }
    .boutique-rangee .carte-produit__dispo { gap: 6px; font-size: 0.75rem; }
    .boutique-rangee .carte-produit__prix strong { font-size: 1.125rem; }
    .boutique-rangee .carte-produit__bouton { width: 34px; height: 34px; }

    /* Le catalogue, et « Dans la même catégorie » de la fiche : une ligne par produit, la photo à gauche (37 %, 140 px au
       plus), le nom sur trois lignes */
    :is(.boutique-groupe .grille-produits, .fiche-similaires) { gap: 10px; }
    :is(.boutique-groupe, .fiche-similaires) .carte-produit--boutique { display: grid; grid-template-columns: min(37%, 140px) minmax(0, 1fr); align-items: start; column-gap: 12px; padding: 10px; }
    :is(.boutique-groupe, .fiche-similaires) .carte-produit__visuel { aspect-ratio: 1; padding: 6px; border-radius: 8px; }
    :is(.boutique-groupe, .fiche-similaires) .carte-produit__corps { gap: 4px; padding: 0; }
    :is(.boutique-groupe, .fiche-similaires) .carte-produit__titre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: 1rem; }
    :is(.boutique-groupe, .fiche-similaires) .carte-produit__desc { -webkit-line-clamp: 2; line-clamp: 2; margin: 0; font-size: 0.8125rem; }
    :is(.boutique-groupe, .fiche-similaires) .carte-produit__fiche { display: none; }
    :is(.boutique-groupe, .fiche-similaires) .carte-produit__dispo { gap: 6px; font-size: 0.8125rem; }
    :is(.boutique-groupe, .fiche-similaires) .carte-produit__pied { align-items: center; padding-top: 4px; }
    :is(.boutique-groupe, .fiche-similaires) .carte-produit__prix strong { font-size: 1.375rem; }

    /* « Comment ça marche ? » : trois étapes plus courtes */
    .boutique-etape { gap: 12px; padding: 14px; }
    .boutique-etape__numero { width: 36px; height: 36px; }
    .boutique-etape__titre { margin-bottom: 4px; font-size: 1.0625rem; }
    .boutique-etape p { font-size: 0.9375rem; }
}

/* La recherche en tête de la colonne de filtres, et le message « aucun produit ne correspond » */
.filtre-recherche { display: grid; gap: 6px; padding-bottom: 14px; }
.filtre-recherche__label { font-size: 0.875rem; font-weight: 700; }
.filtre-recherche__champ { position: relative; }
.filtre-recherche__champ .champ__saisie { min-height: 48px; padding-right: 52px; }
.filtre-recherche__bouton { position: absolute; top: 50%; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 6px; background: none; color: var(--green); cursor: pointer; transform: translateY(-50%); }
.filtre-recherche__bouton:hover { color: var(--green-dark); }
.guides-vide__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* ── [boutique] ── fin ── */

/* ── [boutique-fiche] Fiche produit de la boutique ── début ── */
/* La fiche /boutique/{slug} (docs/DIRECTION-DESIGN.md § 4.6) : la galerie à gauche, le panneau à droite dès 900 px, tout
   empilé en dessous. Le bandeau sombre ne porte que le fil d'Ariane (l'en-tête du site est posé dessus). Aucune animation
   d'entrée : le contrôleur « reveal » s'en charge ; la vue principale change d'un coup (contrôleur « galerie »). */
.bandeau--fiche { padding-block: calc(var(--entete-h) + 16px) 12px; }
.bandeau--fiche .fil-ariane { margin-bottom: 0; }

.fiche__grille { display: grid; gap: clamp(24px, 4vw, 40px); }
.fiche__galerie, .fiche__panneau { min-width: 0; }

/* La vue principale : un cadre blanc en 4:3 (moins haut qu'un carré, David 12/10/2026), la photo y est contenue en entier,
   marge comprise. Les visuels sont détourés et de formats très variés (jusqu'à 182 × 1 200) : l'image est posée en absolu,
   sinon sa hauteur à 100 % ne se résout pas dans la grille et une vue très haute déborde du cadre. */
.fiche__vue { --vue-marge: clamp(12px, 3vw, 28px); position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--rayon-s); background: #FFFFFF; overflow: hidden; }
.fiche__vue img { position: absolute; inset: var(--vue-marge); width: calc(100% - 2 * var(--vue-marge)); height: calc(100% - 2 * var(--vue-marge)); object-fit: contain; }
.fiche__vue-vide { color: var(--muted); }
.fiche__vue .carte-produit__promo { left: 16px; bottom: 16px; }
/* On glisse du doigt sur la vue pour changer de photo : le navigateur garde le défilement vertical de la page */
.fiche__vue { touch-action: pan-y; }

/* Les flèches de la vue : deux pastilles rondes, posées à mi-hauteur sur les bords, cible de 44 px */
.fiche__fleche {
    position: absolute; top: 50%; z-index: 2; translate: 0 -50%;
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink);
    box-shadow: 0 2px 8px rgba(22, 32, 26, 0.12); cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.fiche__fleche[hidden] { display: none; }
.fiche__fleche--precedente { left: 12px; }
.fiche__fleche--precedente .ico { transform: rotate(90deg); }
.fiche__fleche--suivante { right: 12px; }
.fiche__fleche--suivante .ico { transform: rotate(-90deg); }
.fiche__fleche:hover { border-color: var(--green); color: var(--green); background: #FFFFFF; }
.fiche__fleche:active { background: #EEF2EC; }
.fiche__fleche:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }

/* Le zoom de la vue principale (contrôleur « galerie ») : au survol de la souris, la photo grossit 1,5 fois autour du
   pointeur (le cadre la rogne) ; un clic ouvre la visionneuse. Le bouton loupe, en haut à droite, fait de même au clavier.
   1,5 et non plus 2,2 (David, 12/10/2026) : à 2,2 la machine sortait du cadre, c'est la visionneuse qui montre le détail. */
.fiche__vue img { cursor: zoom-in; transition: transform 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
    .fiche__vue--loupe img { transform: scale(1.5); }
}
.fiche__agrandir {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); cursor: pointer;
}
.fiche__agrandir[hidden] { display: none; }
.fiche__agrandir:hover { border-color: var(--green); color: var(--green); }
.fiche__agrandir:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }

/* La visionneuse plein écran : la photo en entier sur blanc ; un clic zoome (2,5 fois) à l'endroit visé, la souris promène
   le zoom, un second clic revient. Au doigt, le pincement natif reste permis. La page dessous ne défile plus. */
html.visionneuse-ouverte { overflow: hidden; }
.visionneuse { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #FFFFFF; color: var(--ink); }
.visionneuse::backdrop { background: rgba(10, 16, 12, 0.6); }
.visionneuse__scene { position: absolute; inset: 64px 16px 56px; overflow: hidden; touch-action: pinch-zoom; }
.visionneuse__photo { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; transition: transform 0.2s var(--ease); }
.visionneuse__photo--zoom { transform: scale(2.5); cursor: zoom-out; }
.visionneuse__compteur { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: 0.9375rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.visionneuse__fermer, .visionneuse__fleche {
    position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
    border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--ink); cursor: pointer;
}
.visionneuse__fermer { top: 10px; right: 12px; }
.visionneuse__fleche { top: 50%; translate: 0 -50%; }
.visionneuse__fleche--precedente { left: 12px; }
.visionneuse__fleche--precedente .ico { transform: rotate(90deg); }
.visionneuse__fleche--suivante { right: 12px; }
.visionneuse__fleche--suivante .ico { transform: rotate(-90deg); }
.visionneuse__fermer:hover, .visionneuse__fleche:hover { border-color: var(--green); color: var(--green); }
.visionneuse__fermer:focus-visible, .visionneuse__fleche:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }

/* Les vignettes : une rangée qui défile au doigt plutôt que de passer à la ligne ; vignettes de 92 px, la vue choisie est cernée de vert */
.fiche__vignettes { position: relative; list-style: none; margin: 12px 0 0; padding: 0 0 4px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; }
.fiche__vignettes li { flex: 0 0 auto; scroll-snap-align: start; }
.fiche__vignette { position: relative; display: grid; place-items: center; width: 92px; height: 92px; padding: 6px; border: 2px solid var(--line); border-radius: 10px; background: #FFFFFF; transition: border-color 0.2s var(--ease); }
/* Même précaution que pour la vue principale : l'image en absolu, contenue dans la vignette quelle que soit sa forme */
.fiche__vignette img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.fiche__vignette:hover { border-color: #9FB19A; }
.fiche__vignette[aria-current="true"] { border-color: var(--green); }
.fiche__vignette:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }

.fiche__categorie { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.fiche__titre { margin-top: 6px; font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.fiche__reference { margin-top: 8px; font-size: 0.9375rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.fiche__technique { margin-top: 12px; font-size: 1.0625rem; color: var(--text-2); }
/* Un robot : surface maximale et équipements en pastilles, puis les liens vers la page Robots */
.fiche__atouts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.fiche__robots { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; }

.fiche__prix { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.fiche__prix-montant { font-family: var(--font-titre); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fiche__prix-montant--demande { font-size: clamp(1.5rem, 3vw, 2rem); }
.fiche__prix-ancien { display: block; margin-top: 4px; font-family: var(--font-texte); font-size: 1rem; font-weight: 400; color: var(--muted); text-decoration: line-through; }
.fiche__prix-mention { margin-top: 4px; font-size: 0.875rem; color: var(--muted); }

/* Le pack : la même machine avec sa batterie et son chargeur, dans un encart sauge pour ne pas le confondre avec le prix de la machine nue */
.fiche__pack { margin-top: 16px; padding: 14px 16px; border-radius: var(--rayon-s); background: var(--sage); color: var(--ink); }
.fiche__pack-titre strong { font-family: var(--font-titre); font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fiche__pack-contenu { margin-top: 4px; font-size: 0.9375rem; color: var(--text-2); }
/* « Aussi en location » : la machine du parc liée à ce produit (MachineLocation::produit), sous les boutons d'appel. */
.fiche__location { display: grid; gap: 4px; margin-top: 16px; padding: 14px 16px; border-radius: var(--rayon-s); border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.fiche__location-titre { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.fiche__location-titre strong { font-family: var(--font-titre); font-size: 1.125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fiche__location-statut { font-size: 0.9375rem; color: var(--text-2); }
.fiche__location .lien-fleche { justify-self: start; }

.fiche__dispo { margin-top: 16px; font-size: 1rem; }
.fiche__actions { display: grid; gap: 10px; margin-top: 20px; }
.fiche__actions .bouton { width: 100%; }
.fiche__note { margin-top: 12px; font-size: 0.875rem; color: var(--muted); }

/* Description, points forts, contenu de la boîte, puis les caractéristiques */
.fiche-detail__grille { display: grid; gap: clamp(32px, 5vw, 56px); }
.fiche-detail .titre-section, .fiche-caracs .titre-section { margin-bottom: 20px; }
.fiche-detail__texte { max-width: 68ch; color: var(--text-2); }
/* Les blocs sous le panneau (description, points forts, contenu de la boîte, fiche technique) : une colonne chacun, espacés */
.fiche-detail__colonne { min-width: 0; }
.fiche-detail__bloc + .fiche-detail__bloc { margin-top: clamp(28px, 4vw, 40px); }
/* Points forts : une coche verte devant chaque phrase ; les points au-delà du huitième sont repliés dans un <details> */
.fiche-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fiche-points li { position: relative; padding-left: 26px; color: var(--text-2); overflow-wrap: anywhere; }
.fiche-points li::before { content: ""; position: absolute; left: 3px; top: 0.35em; width: 6px; height: 11px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.fiche-points__suite { margin-top: 12px; }
.fiche-points__suite summary { cursor: pointer; font-weight: 600; color: var(--green); padding-block: 9px; }
.fiche-points__suite summary:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
.fiche-points__suite .fiche-points { margin-top: 10px; }
/* Dans la boîte : la quantité en chiffres alignés, puis le libellé */
.fiche-boite { list-style: none; margin: 0; padding: 0; }
.fiche-boite li { padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.fiche-boite__quantite { display: inline-block; min-width: 2.5em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
/* Le lien vers la fiche du fabricant : discret, sous le tableau */
.fiche-detail__officielle { margin-top: 20px; font-size: 0.875rem; }
.fiche-detail__officielle a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.fiche-detail__officielle a:hover { color: var(--green); }
.fiche-detail__officielle a:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }

.fiche-similaires__suite { margin-top: 20px; }
.fiche-similaires > li { min-width: 0; }

@media (min-width: 560px) { .fiche__actions { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
@media (min-width: 900px) {
    .fiche__grille { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
    /* Le panneau reste en vue pendant qu'on regarde les vignettes (la galerie est plus haute que lui) */
    .fiche__panneau { position: sticky; top: 24px; }
    .fiche__actions { grid-template-columns: 1fr; }
    .fiche-detail__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fiche-caracs__groupes { column-count: 2; column-gap: clamp(32px, 5vw, 56px); }
}

/* Les données clés, sous la disponibilité : une grille compacte libellé / valeur (deux colonnes dès que la place le permet) */
.fiche-cles { margin-top: 16px; padding: 14px 18px 12px; border: 1px solid var(--line); border-radius: var(--rayon-s); background: #FFFFFF; }
.fiche-cles__titre { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.fiche-cles__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 8px 0 0; }
.fiche-cles__item { padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.fiche-cles__item dt { font-size: 0.8125rem; color: var(--muted); }
.fiche-cles__item dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fiche-cles__suite { display: inline-flex; margin-top: 10px; }
@media (max-width: 339px) { .fiche-cles__liste { grid-template-columns: 1fr; } }

/* La barre d'ancres sous le bloc principal : défile de côté sur mobile, collante en haut de l'écran dès 900 px (l'en-tête
   du site n'est pas collant : il part avec le haut de la page). Les sections ciblées gardent une marge au-dessus. */
.fiche-nav { background: #FFFFFF; border-block: 1px solid var(--line); }
.fiche-nav__liste { list-style: none; display: flex; gap: 4px; margin: 0 auto; padding-block: 0; overflow-x: auto; scrollbar-width: none; }
.fiche-nav__liste li { flex: 0 0 auto; }
.fiche-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; font-weight: 600; color: var(--text-2); text-decoration: none; border-bottom: 3px solid transparent; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.fiche-nav a:hover { color: var(--green); border-bottom-color: var(--green); }
.fiche-nav a:focus-visible { outline: 3px solid var(--sun); outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--ink); }
#fiche-description, #fiche-points-forts, #fiche-caracteristiques, #fiche-boite { scroll-margin-top: 72px; }
@media (min-width: 900px) { .fiche-nav { position: sticky; top: 0; z-index: 5; } }

/* Les caractéristiques techniques : un tableau par groupe (libellé à gauche, valeur à droite), lignes alternées ;
   deux colonnes de groupes dès 900 px, un groupe n'est jamais coupé entre deux colonnes. */
.fiche-caracs__groupes { display: block; }
.fiche-groupe { width: 100%; margin-bottom: 28px; border-collapse: collapse; break-inside: avoid; }
.fiche-groupe__titre { padding: 0 12px 8px; border-bottom: 2px solid var(--ink); font-family: var(--font-titre); font-size: 1rem; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); }
.fiche-groupe th, .fiche-groupe td { padding: 11px 12px; text-align: left; vertical-align: top; }
.fiche-groupe th { width: 52%; font-weight: 400; color: var(--text-2); }
.fiche-groupe td { font-weight: 600; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fiche-groupe tr:nth-child(even) { background: #F3F5EF; }
/* Oui : une coche verte devant le mot ; Non : le mot, discret (jamais la couleur ni le signe seuls) */
.fiche-oui { position: relative; display: inline-block; padding-left: 20px; }
.fiche-oui::before { content: ""; position: absolute; left: 3px; top: 0.25em; width: 6px; height: 11px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.fiche-non { font-weight: 400; color: var(--muted); }
@media (max-width: 479px) {
    /* Étroit : le libellé à gauche, la valeur à droite, en plus petit et plus serré (passe du 14/10/2026 : le libellé
       au-dessus de sa valeur doublait la hauteur des tableaux) ; une valeur longue passe à la ligne dans sa colonne */
    .fiche-groupe th, .fiche-groupe td { padding: 8px 10px; font-size: 0.875rem; line-height: 1.35; }
    .fiche-groupe th { width: 50%; }
    .fiche-groupe__titre { padding: 0 10px 6px; font-size: 0.9375rem; }
    .fiche-groupe { margin-bottom: 20px; }
}
/* ── [boutique-fiche] ── fin ── */



/* (séparateur) */


/* ── [parametres] Page Contact, réseaux sociaux, bandeau admin ── début ── */

/* La page Contact : la section a le fond de la page (comme « Votre magasin » de la boutique), pour que les cartes
   d'infos (.info-atelier, fond --bg + bordure fine) restent légères ; le formulaire, lui, est une carte blanche.
   De haut en bas : les actions rapides, les coordonnées (mobile : d'abord) et le formulaire (deux colonnes dès 1080 px),
   puis trois renvois. Mouvement sobre : tout est coupé avec « réduire les animations ». */
.contact-page { padding-top: clamp(32px, 5vw, 56px); }
.contact { display: grid; gap: clamp(32px, 5vw, 48px); margin-top: clamp(40px, 6vw, 64px); }
.contact__titre { margin-bottom: 20px; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.15; }

/* Le statut en direct, dans le bandeau */
.contact-statut { margin-top: 20px; }
.contact-statut .pastille { padding: 7px 16px; font-size: 0.9375rem; }
.contact-statut .pastille::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Les actions rapides : 2 colonnes sur mobile, une rangée dès que la place le permet */
/* --n3 … --n6 : le nombre de tuiles (le gabarit le compte), pour qu'aucune ne reste seule sur sa ligne */
.actions-rapides__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.actions-rapides__liste > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 720px) {
    .actions-rapides__liste { gap: 16px; }
    .actions-rapides__liste > li:last-child:nth-child(odd) { grid-column: auto; }
    .actions-rapides__liste--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .actions-rapides__liste--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .actions-rapides__liste--n5, .actions-rapides__liste--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
    .actions-rapides__liste--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .actions-rapides__liste--n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.action-rapide {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    height: 100%; min-height: 44px; padding: 16px;
    border: 1px solid var(--line); border-radius: var(--rayon-m);
    background: var(--surface); color: var(--ink); text-decoration: none;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
/* La pastille : un carré aux angles adoucis, teinté sauge avec un léger relief, plus présente qu'un rond pâle ; la flèche
   en haut à droite dit « on y va » (le lien externe de l'itinéraire a la sienne). Au survol, la pastille passe au vert
   plein et la flèche avance. */
.action-rapide__icone {
    display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px;
    border-radius: 14px; background: linear-gradient(145deg, #E6EEE2, var(--sage)); color: var(--green);
    box-shadow: inset 0 0 0 1px rgba(31, 92, 58, 0.08);
    transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.action-rapide__fleche { position: absolute; top: 16px; right: 16px; color: var(--muted); transition: color 0.2s var(--ease), transform 0.2s var(--ease); }
.action-rapide__titre { font-family: var(--font-titre); font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.action-rapide__sous { font-size: 0.875rem; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.action-rapide:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ink); }
.action-rapide:active { transform: scale(0.98); }
@media (hover: hover) {
    .action-rapide:hover { border-color: var(--green); box-shadow: var(--ombre-douce); transform: translateY(-2px); color: var(--ink); }
    .action-rapide:hover .action-rapide__icone { background: var(--green); color: #FFFFFF; transform: rotate(-4deg); }
    .action-rapide:hover .action-rapide__fleche { color: var(--green); transform: translateX(3px); }
}
/* Appeler : la seule tuile pleine, pour que le téléphone saute aux yeux sans être énorme */
.action-rapide--appel { border-color: var(--green); background: var(--green); color: #FFFFFF; }
.action-rapide--appel .action-rapide__icone { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.action-rapide--appel .action-rapide__fleche { color: var(--on-dark); }
.action-rapide--appel .action-rapide__sous { color: var(--on-dark); }
@media (hover: hover) {
    .action-rapide--appel:hover { background: var(--green-dark); border-color: var(--green-dark); color: #FFFFFF; }
    .action-rapide--appel:hover .action-rapide__icone { background: var(--sun); color: var(--ink); }
    .action-rapide--appel:hover .action-rapide__fleche { color: #FFFFFF; }
}

/* Les coordonnées : téléphone mis en valeur (moins gros qu'avant), e-mail qui ne se coupe pas */
.contact__telephone { font-size: clamp(1.5rem, 3.2vw, 1.875rem); line-height: 1.1; }
.contact__email { overflow-wrap: anywhere; font-size: 1rem; } /* l'adresse e-mail est longue : plus petite que le téléphone sur un téléphone, pour ne pas se couper au milieu */
@media (min-width: 480px) { .contact__email { font-size: 1.25rem; } }
.contact .info-atelier__corps .bouton { justify-self: start; margin-top: 4px; }
.contact .info-atelier { transition: border-color 0.2s var(--ease); }
@media (hover: hover) { .contact .info-atelier:hover { border-color: #B9C5B3; } }

/* Copier en un clic : une petite pastille contour à côté de la valeur ; « Copié » reste deux secondes */
.copie { justify-self: start; }
.bouton-copie {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 999px;
    background: transparent; color: var(--text-2);
    font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.bouton-copie[hidden] { display: none; }
@media (pointer: coarse) { .bouton-copie { min-height: 44px; padding: 0 16px; } }
.bouton-copie:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
@media (hover: hover) { .bouton-copie:hover { border-color: var(--green); color: var(--green); } }
.bouton-copie--fait, .bouton-copie--fait:hover { border-color: var(--dispo); background: var(--dispo-bg); color: var(--dispo); }

/* Les horaires : la ligne d'aujourd'hui en vert, avec sa petite étiquette (contrôleur « ouverture ») */
.info-atelier .horaires__ligne--aujourdhui dt, .info-atelier .horaires__ligne--aujourdhui dd { color: var(--green); font-weight: 700; }
.info-atelier .horaires__ligne--aujourdhui dt::after {
    content: 'aujourd\2019 hui';
    display: block; width: fit-content; margin-top: 3px; padding: 2px 8px; border-radius: 999px;
    background: var(--sage); color: var(--green); font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}

/* Le formulaire : une carte blanche */
.contact__formulaire { padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--rayon-l); background: var(--surface); }
.contact__formulaire .contact__titre { margin-bottom: 16px; }
.contact__formulaire > .confirmation { margin-bottom: 20px; }
.confirmation__urgent { margin-top: 8px; }
.confirmation__urgent a { color: var(--green); font-weight: 700; }

.contact__objets { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.contact__objets legend { padding: 0; margin-bottom: 10px; }
.contact__puces { display: flex; flex-wrap: wrap; gap: 8px; }
.contact__puces .puce { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; white-space: normal; }
.contact__puces .puce--radio:has(input:checked) { box-shadow: 0 0 0 1px var(--sun); }
.contact__aides { display: grid; }
.contact__aide {
    margin-top: 2px; padding: 12px 16px; border-radius: var(--rayon-s);
    background: var(--sage); font-size: 0.9375rem; color: var(--ink);
    animation: contact-aide 0.25s var(--ease);
}
.contact__aide[hidden] { display: none; }
.contact__aide .lien-fleche { margin-left: 6px; white-space: nowrap; }
@keyframes contact-aide { from { opacity: 0; transform: translateY(-4px); } }
.confirmation:focus { outline: none; box-shadow: none; }
.formulaire .bouton:disabled { opacity: 0.7; cursor: progress; }
@media (min-width: 1080px) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: start; } }

/* Avant de nous écrire : trois renvois vers la page Réparation */
.contact-liens { margin-top: clamp(40px, 6vw, 64px); }
.contact-liens__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 800px) { .contact-liens__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.contact-lien {
    position: relative; display: flex; flex-direction: column; gap: 6px;
    height: 100%; padding: 20px 52px 20px 20px;
    border: 1px solid var(--line); border-radius: var(--rayon-m);
    background: var(--surface); color: var(--ink); text-decoration: none;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-lien__titre { font-family: var(--font-titre); font-size: 1.1875rem; font-weight: 700; line-height: 1.2; }
.contact-lien__texte { font-size: 0.9375rem; color: var(--text-2); }
.contact-lien__fleche { position: absolute; right: 18px; top: 50%; margin-top: -10px; color: var(--green); transition: transform 0.2s var(--ease); }
.contact-lien:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ink); }
@media (hover: hover) {
    .contact-lien:hover { border-color: var(--green); box-shadow: var(--ombre-douce); color: var(--ink); }
    .contact-lien:hover .contact-lien__fleche { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .action-rapide, .action-rapide__icone, .action-rapide__fleche, .contact .info-atelier, .bouton-copie, .contact-lien, .contact-lien__fleche { transition: none; }
    .action-rapide:hover, .action-rapide:active, .action-rapide:hover .action-rapide__icone, .action-rapide:hover .action-rapide__fleche { transform: none; }
    .contact-lien:hover .contact-lien__fleche { transform: none; }
    .contact__aide { animation: none; }
}

/* Les réseaux sociaux : une rangée d'icônes rondes (page Contact, pied de page) ; rien n'est rendu sans réseau renseigné */
.reseaux { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.reseau {
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--surface); color: var(--green); text-decoration: none;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.reseau:hover { background: var(--sage); color: var(--ink); }
.reseaux--pied { margin-top: 10px; }
.pied .reseau { border-color: rgba(255, 255, 255, 0.28); background: transparent; color: #C9D4C7; }
.pied .reseau:hover { border-color: var(--sun); background: transparent; color: var(--sun); }

/* Le pied de page : une colonne « Le site » entre les coordonnées et les horaires dès 900 px, ses liens sur deux colonnes
   équilibrées (5 liens : 3 + 2, 7 connecté : 4 + 3) pour ne pas être plus haute que les horaires (demande de David,
   15/10/2026) ; sur mobile, les liens se rangent en lignes pour ne pas allonger la page */
.pied__plan { display: grid; gap: 12px; align-content: start; }
.pied__pages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.pied__pages a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.pied__pages a:hover { text-decoration: underline; }
@media (min-width: 900px) {
    .pied__interieur { grid-template-columns: minmax(0, 1fr) auto auto; }
    .pied__pages { display: block; columns: 2; column-gap: 40px; }
    .pied__pages li { break-inside: avoid; }
}
/* À la souris, des lignes plus serrées ; au doigt (tablette), les liens gardent leurs 44 px */
@media (min-width: 900px) and (pointer: fine) {
    .pied__pages a { min-height: 34px; }
}

/* Accueil sans la carte Location (page désactivée) : la carte Magasin prend toute la colonne de droite */
@media (min-width: 880px) {
    .services--reparation .service:nth-child(2):last-child { grid-area: 1 / 2 / 3 / 3; min-height: 540px; }
}

/* Le bandeau « page désactivée » : seul l'administrateur connecté le voit. Posé en bas de l'écran, parce que l'en-tête du
   site flotte en haut des pages et que rien ne doit le recouvrir. Texte foncé sur le jaune : plus de 8:1. */
.bandeau-admin {
    position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 20px;
    max-width: 780px; margin-inline: auto; padding: 8px 16px;
    border-radius: var(--rayon-s); background: var(--sun); color: var(--ink);
    box-shadow: var(--ombre-carte); font-size: 0.9375rem; line-height: 1.35;
}
.bandeau-admin__texte { font-weight: 600; }
.bandeau-admin__lien { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.bandeau-admin__lien:hover { color: var(--ink); text-decoration-thickness: 2px; }

/* ── [parametres] ── fin ── */

/* ── [partenaires-carrousel] ── début ── */
/* Le carrousel des partenaires (accueil de la boutique, templates/partiels/_carrousel_partenaires.html.twig). Chaque diapositive
   reprend la mise en page du bandeau partenaire (.partenaire__*, plus haut) : visuel large avec le texte posé en HTML à droite
   sur ordinateur, photo au-dessus du texte entre 720 et 1199 px, recadrage 2:1 sur téléphone.
   Les diapositives sont côte à côte dans une piste qui défile à l'horizontale (scroll-snap) : sans JavaScript, on les fait
   défiler au doigt ou à la molette et tout reste lisible. Le contrôleur « carrousel » ajoute le défilement automatique et
   les commandes. Le rayon et le rognage sont portés par la piste, pour que les diapositives se touchent sans bord arrondi
   au milieu. */
.carrousel__piste {
    display: flex; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
    border-radius: var(--rayon-m); background: var(--ink);
}
.carrousel__diapo { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.carrousel .partenaire__cadre { height: 100%; border-radius: 0; }
/* Photo au-dessus du texte : si une diapositive voisine est plus haute, c'est le texte qui prend la place en plus. */
.carrousel .partenaire__cadre--photo { grid-template-rows: auto 1fr; }
/* Sans visuel, la diapositive reste un bandeau sombre : le texte est centré dans la hauteur de la piste. */
.carrousel .partenaire__cadre:not(.partenaire__cadre--photo) { align-content: center; min-height: 200px; }
.carrousel .partenaire__cadre:not(.partenaire__cadre--photo) .partenaire__texte { padding: 32px clamp(24px, 5vw, 56px); }
/* Les commandes prennent le relais du défilement natif : la barre de défilement n'a plus de raison d'être là. */
.carrousel--pret .carrousel__piste { scrollbar-width: none; }
.carrousel--pret .carrousel__piste::-webkit-scrollbar { display: none; }

/* Sous la piste : Pause et points à gauche, flèches à droite. Cachées dans le HTML tant que le contrôleur n'est pas chargé. */
.carrousel__commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: 12px; }
.carrousel__commandes[hidden] { display: none; }
.carrousel__gauche { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.carrousel__points { list-style: none; display: flex; margin: 0; padding: 0; }
.carrousel__fleches { display: flex; gap: 8px; }

.carrousel__pause, .carrousel__fleche {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; margin: 0; padding: 0;
    border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.14s var(--ease);
}
.carrousel__pause { padding: 0 18px 0 14px; border-radius: 999px; font-size: 0.9375rem; font-weight: 600; }
.carrousel__pause[hidden] { display: none; }
.carrousel__fleche { width: 44px; border-radius: 50%; }
.carrousel__pause:active, .carrousel__fleche:active { transform: scale(0.97); }
.carrousel__pause:focus-visible, .carrousel__fleche:focus-visible, .carrousel__point:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
/* Une seule icône à la fois : « pause » tant que ça défile, « lecture » une fois arrêté à la main. */
.carrousel__pause-ico--lecture { display: none; }
.carrousel[data-carrousel-etat='pause'] .carrousel__pause-ico--pause { display: none; }
.carrousel[data-carrousel-etat='pause'] .carrousel__pause-ico--lecture { display: block; }
/* Le même bouton sur les bandes qui défilent seules (accueil, avis Google : bande_controller.js) */
[data-bande-etat='arret'] .carrousel__pause-ico--pause { display: none; }
[data-bande-etat='arret'] .carrousel__pause-ico--lecture { display: block; }
.bande__arret { flex-shrink: 0; }
.avis-google__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }

/* Les points : une cible de 44 px autour d'une pastille de 10 px ; la diapositive courante s'allonge et se remplit (jamais la couleur seule). */
.carrousel__point { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.carrousel__pastille { display: block; width: 10px; height: 10px; border: 2px solid var(--muted); border-radius: 999px; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); }
.carrousel__point[aria-current='true'] .carrousel__pastille { width: 28px; border-color: var(--green); background: var(--green); }

@media (hover: hover) and (pointer: fine) {
    .carrousel__pause:hover, .carrousel__fleche:hover { border-color: var(--green); color: var(--green); }
    .carrousel__point:hover .carrousel__pastille { border-color: var(--green); }
}
/* ── [partenaires-carrousel] ── fin ── */

/* ── [prix-pro] Prix TTC ou HT : le choix « Particulier / Professionnel » (boutique et location) ── début ── */
/* La macro de partiels/_prix.html.twig écrit les deux prix ; la classe « prix-pro » sur <html> (contrôleur « prix »)
   choisit celui qui se montre. Sans le choix dans les Paramètres, il n'y a pas de prix HT dans la page. */
.prix-ht { display: none; }
.prix-pro .prix-ttc { display: none; }
.prix-pro .prix-ht { display: inline; }

/* Le sélecteur : deux boutons dans une pilule, le choix en cours en vert plein. */
.choix-prix { display: inline-flex; padding: 3px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); }
.choix-prix[hidden] { display: none; }
.choix-prix__option {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
    border: 0; border-radius: 999px; background: transparent; color: var(--ink);
    font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.choix-prix__taxe { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.04em; }
.choix-prix__option[aria-pressed='true'] { background: var(--green); color: #FFFFFF; }
.choix-prix__option[aria-pressed='true'] .choix-prix__taxe { color: rgba(255, 255, 255, 0.85); }
@media (hover: hover) and (pointer: fine) {
    .choix-prix__option[aria-pressed='false']:hover { color: var(--green); }
}

/* Sa place : sous le compteur des listes (Boutique, Robots), sous le prix de la fiche produit, sur la page Location, et dans les outils de
   « La sélection de l'atelier », où il passe à la ligne sur téléphone plutôt que d'écraser le lien voisin. */
.catalogue__choix-prix, .fiche__choix-prix { margin-top: 12px; }
/* Boutique : « Particulier / Professionnel » et le catalogue d'une marque sur la même ligne, sous le compteur. */
.catalogue__outils { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 12px; }
.catalogue__outils:not(:has(> :not([hidden]))) { display: none; }
.catalogue__outils .catalogue__choix-prix { margin-top: 0; }
/* Dès deux colonnes, la ligne s'aligne sur le champ « Rechercher » de la colonne de filtres (demande de David, 15/10/2026) :
   le compteur prend la hauteur de ligne de l'étiquette, la ligne son écart (6 px), et le champ la hauteur des pastilles. */
@media (min-width: 960px) {
    .catalogue__entete > .sous-titre-section { margin-top: 0; line-height: calc(0.875rem * 1.55); }
    .catalogue__outils { margin-top: 6px; }
    .filtres-boutique .filtre-recherche__champ .champ__saisie { min-height: 54px; }
}

/* Le catalogue d'une marque : un logo par marque cochée « Catalogue » dans le BO, à la hauteur du choix des prix (54 px).
   Sur téléphone, une ligne qui défile au doigt, de bord à bord ; dès 720 px, les logos passent à la ligne si besoin. */
/* contain : la ligne ne donne pas sa largeur au catalogue (sans cela, ses logos bout à bout élargiraient toute la page). */
.marques-catalogue { flex: 1 1 100%; min-width: 0; margin-inline: calc(-1 * var(--gouttiere)); contain: inline-size; }
.marques-catalogue__liste {
    list-style: none; margin: 0; padding: 2px var(--gouttiere); display: flex; gap: 8px;
    overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gouttiere); scrollbar-width: none;
}
.marques-catalogue__liste::-webkit-scrollbar { display: none; }
.marques-catalogue__liste > li { flex: none; scroll-snap-align: start; }
.marque-catalogue {
    display: flex; align-items: center; justify-content: center; min-width: 96px; height: 54px; padding: 0 18px;
    border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
    font-family: var(--font-titre); font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; text-decoration: none;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.marque-catalogue__logo { display: block; width: auto; height: 24px; max-width: 112px; object-fit: contain; }
/* La marque choisie : le vert du choix des prix, en anneau, pour ne pas noyer un logo qui a ses propres couleurs */
.marque-catalogue[aria-current] { border-color: var(--green); box-shadow: inset 0 0 0 2px var(--green); }
.marque-catalogue:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .marque-catalogue:not([aria-current]):hover { border-color: var(--green); }
}
@media (min-width: 720px) {
    .marques-catalogue { flex: 0 1 auto; margin-inline: 0; contain: none; }
    .marques-catalogue__liste { flex-wrap: wrap; overflow: visible; padding: 0; }
}

/* Page Location : entre les tuiles de catégories et les cartes des machines. */
.location__choix-prix { margin-bottom: 20px; }

/* Location : « Comment se passe une location » (les durées, puis les trois temps) et le créneau du formulaire, en puces */
.location-infos { display: grid; gap: 36px; margin-top: 28px; }
.location-infos__titre { margin-bottom: 14px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.location-infos__numero { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Les titres des cartes sont des h4 (sous « Les durées » et « Étape par étape ») : même allure que les h3 des autres cartes */
.location-infos .engagement__titre { margin: 0; font-family: var(--font-titre); text-wrap: balance; }
@media (min-width: 900px) { .location-infos .engagements__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.creneaux { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.creneaux legend { padding: 0; margin-bottom: 10px; }
.creneaux__puces { display: flex; flex-wrap: wrap; gap: 8px; }
.creneaux__puces .puce { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; white-space: normal; }
.creneaux__puces .puce--radio:has(input:checked) { box-shadow: 0 0 0 1px var(--sun); }

/* Le calendrier de la demande de location (calendrier_controller.js) : les jours libres en blanc, les jours déjà pris
   dans KronoFix en ambre hachuré (barrés : pas seulement la couleur), les dates choisies en vert, la période entre les
   deux en sauge. Des cases de 44 px au doigt. Caché sans JavaScript : les champs de date suffisent. */
.calendrier[hidden] { display: none; }
.calendrier { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--rayon-s); background: color-mix(in srgb, var(--bg) 60%, var(--surface)); }
.calendrier__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.calendrier__mois { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: 1.125rem; }
.calendrier__mois::first-letter { text-transform: uppercase; }
.calendrier__fleche {
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
    cursor: pointer; transition: border-color 0.15s, background-color 0.15s;
}
.calendrier__fleche--avant svg { transform: rotate(90deg); }
.calendrier__fleche--apres svg { transform: rotate(-90deg); }
.calendrier__fleche:hover:not(:disabled) { border-color: var(--green); }
.calendrier__fleche:focus-visible { outline: 3px solid rgba(31, 90, 54, 0.35); outline-offset: 2px; }
.calendrier__fleche:disabled { opacity: 0.35; cursor: default; }
.calendrier__grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendrier__jour-semaine { padding-bottom: 2px; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.calendrier__date {
    min-height: 44px; padding: 0;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
    font: 600 0.9375rem/1 var(--font-texte); font-variant-numeric: tabular-nums;
    cursor: pointer; transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.calendrier__date:hover:not(:disabled) { border-color: var(--green); }
.calendrier__date:focus-visible { outline: 3px solid rgba(31, 90, 54, 0.35); outline-offset: 1px; }
.calendrier__date:disabled { cursor: default; color: var(--muted); background: transparent; border-color: transparent; font-weight: 400; }
.calendrier__date--pris:disabled {
    color: var(--reserve); border-color: color-mix(in srgb, var(--reserve) 25%, transparent); text-decoration: line-through;
    background: repeating-linear-gradient(135deg, var(--reserve-bg) 0 5px, color-mix(in srgb, var(--reserve-bg) 45%, var(--surface)) 5px 10px);
}
.calendrier__date--periode { background: var(--sage); border-color: var(--sage); }
.calendrier__date--choisi { background: var(--green); border-color: var(--green); color: #FFFFFF; }
.calendrier__date--aujourdhui:not(.calendrier__date--choisi) { box-shadow: inset 0 0 0 2px var(--sun); }
.calendrier--sans-machine .calendrier__grille { opacity: 0.5; }
.calendrier__etat { margin: 0; min-height: 1.5em; font-size: 0.9375rem; }
.calendrier__etat--alerte { color: var(--indispo); font-weight: 600; }
.calendrier__legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--muted); }
.calendrier__legende li { display: inline-flex; align-items: center; gap: 6px; }
.calendrier__puce { width: 14px; height: 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.calendrier__puce--pris { border-color: color-mix(in srgb, var(--reserve) 25%, transparent); background: repeating-linear-gradient(135deg, var(--reserve-bg) 0 3px, color-mix(in srgb, var(--reserve-bg) 45%, var(--surface)) 3px 6px); }
.calendrier__puce--choisi { border-color: var(--green); background: var(--green); }
/* La livraison dans la demande de location (livraison_controller.js) : la case, les conditions reprises de KronoFix,
   puis l'adresse et l'estimation des frais quand la case est cochée. */
.livraison { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--rayon-s); background: var(--surface); }
.livraison__case { font-weight: 600; }
.livraison__case span { display: inline-flex; align-items: center; gap: 8px; }
.livraison__case .ico { color: var(--green); }
.livraison__conditions { margin: 0; }
.livraison__adresse { display: grid; gap: 8px; }
.livraison__adresse[hidden] { display: none; }
.livraison__estimation { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--dispo-bg); color: var(--dispo); font-weight: 600; font-size: 0.9375rem; }
.livraison__estimation--alerte { background: var(--indispo-bg); color: var(--indispo); }
@media (max-width: 400px) {
    .calendrier { padding: 10px; }
    .calendrier__grille { gap: 3px; }
    .calendrier__date { border-radius: 8px; }
}
.boutique-rangee__outils:has(.choix-prix) { flex-wrap: wrap; row-gap: 12px; }
/* ── [prix-pro] ── fin ── */

/* ── [marques-reparees] Page Réparation : les marques que l'atelier répare ── début ── */
/* Une tuile blanche par marque, le logo centré à hauteur fixe (ils n'ont pas tous les mêmes proportions) ; le nom en
   capitales quand la marque n'a pas encore de logo. Trois colonnes de tuiles basses sur téléphone (14/10/2026 : 14 marques
   en deux colonnes faisaient 630 px), autant que la place le permet ensuite. */
.marques-reparees__liste {
    list-style: none; margin: 32px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.marques-reparees__marque {
    display: grid; place-items: center; height: 96px; padding: 16px 20px;
    border: 1px solid var(--line); border-radius: var(--rayon-s); background: var(--surface);
}
.marques-reparees__marque img { display: block; width: auto; height: auto; max-width: 100%; max-height: 52px; object-fit: contain; }
.marques-reparees__nom { font-family: var(--font-titre); font-size: 1.125rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; text-align: center; }
.marques-reparees .sous-titre-section a { color: var(--green); font-weight: 700; white-space: nowrap; }
@media (max-width: 719px) {
    .marques-reparees__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
    .marques-reparees__marque { height: 60px; padding: 8px 10px; }
    .marques-reparees__marque img { max-height: 34px; }
    .marques-reparees__nom { font-size: 0.875rem; }
}
/* ── [marques-reparees] ── fin ── */

/* ── [partenaires] ── La page Partenaires : « Notre façon de choisir » (les cartes « engagement » de la page Réparation,
   quatre de front sur grand écran), puis une carte blanche par partenaire, le logo dans un cadre clair en tête,
   l'accroche et le nom, le texte et le lien vers son site en bas de carte (les liens s'alignent d'une carte à l'autre). ── */
.choix-partenaires__intro { max-width: 62ch; }
@media (min-width: 1080px) { .choix-partenaires { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grille-partenaires { margin-top: 28px; list-style: none; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.fiche-partenaire {
    display: flex; flex-direction: column; gap: 12px; height: 100%;
    padding: 24px; border-radius: var(--rayon-l);
    background: var(--surface); box-shadow: var(--ombre-douce), 0 0 0 1px var(--line);
}
.fiche-partenaire__logo { display: grid; place-items: center; height: 120px; padding: 16px; border-radius: var(--rayon-s); background: var(--bg); }
.fiche-partenaire__logo img { width: auto; height: auto; max-width: 100%; max-height: 88px; object-fit: contain; }
/* Sans logo : le nom en grand, dans la police des titres, à la place du logo */
.fiche-partenaire__logo--nom { font-family: var(--font-titre); font-size: 1.75rem; font-weight: 800; color: var(--ink); text-align: center; line-height: 1.1; }
.fiche-partenaire__entete { display: grid; gap: 4px; margin-top: 4px; }
.fiche-partenaire__accroche { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.fiche-partenaire__nom { font-family: var(--font-titre); font-size: 1.5rem; font-weight: 800; line-height: 1.15; color: var(--ink); }
.fiche-partenaire__texte { color: var(--text-2); line-height: 1.55; }
.fiche-partenaire__lien { margin-top: auto; overflow-wrap: anywhere; }
.fiche-partenaire__vide { margin-top: 16px; max-width: 58ch; font-size: 1.125rem; color: var(--muted); }
/* Trois de front sur grand écran : des fiches assez larges pour leur texte (six partenaires = deux rangées pleines) */
@media (min-width: 1080px) { .grille-partenaires { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
/* Sur téléphone, le logo dans un petit cadre à côté de l'accroche et du nom, au lieu d'un bandeau de 120 px en tête :
   le texte reste entier (passe du 14/10/2026). */
@media (max-width: 639px) {
    .grille-partenaires { gap: 14px; }
    .fiche-partenaire { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px 14px; padding: 18px; }
    .fiche-partenaire__logo { height: 64px; padding: 8px; }
    .fiche-partenaire__logo img { max-height: 44px; }
    .fiche-partenaire__logo--nom { font-size: 1rem; }
    .fiche-partenaire__entete { margin-top: 0; }
    .fiche-partenaire__nom { font-size: 1.25rem; }
    .fiche-partenaire > :not(.fiche-partenaire__logo, .fiche-partenaire__entete) { grid-column: 1 / -1; }
    .fiche-partenaire__texte { font-size: 0.9375rem; }
}
.relais-partenaire { margin-top: clamp(40px, 6vw, 64px); }
/* ── [partenaires] ── fin ── */

/* Les pages d'erreur (templates/bundles/TwigBundle/Exception) : le bandeau sombre du site, un surtitre « Erreur 404 »
   en jaune, le bouton de retour ; la 404 propose ensuite les actions rapides de la page Contact. La page des autres
   erreurs est autonome (rien en base) : son bandeau occupe tout l'écran, avec le logo à la place de l'en-tête. */
.erreur__code { margin-bottom: 14px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sun); }
.erreur__retour { margin-top: 28px; }
.erreur__retour .bouton { gap: 8px; }
.erreur__titre { margin-bottom: 24px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; line-height: 1.15; }
.erreur__aide { margin-top: 28px; color: var(--muted); }
.erreur__aide a { color: var(--green); text-decoration: underline; text-underline-offset: 0.2em; }
.bandeau--seul { min-height: 100vh; min-height: 100dvh; display: grid; align-items: center; padding-block: clamp(40px, 8vw, 96px); }
.erreur__logo { display: block; width: auto; height: 48px; margin-bottom: 40px; }