/* ============================================================
   FICHIER GÉNÉRÉ AUTOMATIQUEMENT : ne pas modifier.
   Tout le CSS du site, dans l'ordre de assets/css/style.css.
   Modifier les fichiers d'origine (assets/css/…) : ce fichier
   est refait tout seul en local (plugin css-bundle).
   ============================================================ */


/* ============================================================


   SOMMAIRE DU CSS


   On code dans les fichiers ci-dessous, comme avant.


   Le site ne charge pas ce fichier : il charge assets/css/site.css,


   qui recopie tous ces fichiers dans cet ordre (plugin css-bundle).


   En local, site.css se met à jour tout seul au rechargement de la page.


   Pour ajouter un fichier : une ligne @import ici, à sa place.


   ⚠ Avant une mise en ligne, envoyer aussi assets/css/site.css.


   ============================================================ */


/* 1. Base */


/* ─────────── reset.css ─────────── */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

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

a { 
    color: inherit; text-decoration: none; 
}

ul, ol { 
    list-style: none; 
}

/* Utilitaires */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* button */

button {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* <picture> du snippet « picture » : sans effet sur la mise en page,
   l'image se comporte comme si elle était seule dans son parent */
.picture {
    display: contents;
}


/* ─────────── typography.css ─────────── */


/* PJS light italic */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plusJakartaSans/PlusJakartaSans-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* PJS Regular */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plusJakartaSans/PlusJakartaSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* PJS Regular italic */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plusJakartaSans/PlusJakartaSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* PJS medium */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plusJakartaSans/PlusJakartaSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* PJS medium italic */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plusJakartaSans/PlusJakartaSans-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* PJS semibold */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plusJakartaSans/PlusJakartaSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* PJS semibold italic */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plusJakartaSans/PlusJakartaSans-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* PJS bold */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plusJakartaSans/PlusJakartaSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* PJS bold italic */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plusJakartaSans/PlusJakartaSans-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* PJS Extrabold */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plusJakartaSans/PlusJakartaSans-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* PJS Extrabold italic */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plusJakartaSans/PlusJakartaSans-ExtraBoldItalic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
/* Anton : style « Impact » de la démo interactive de l'accueil.
   Le navigateur ne la télécharge que si elle est affichée. Licence : assets/fonts/anton/OFL.txt */
@font-face {
  font-family: "Anton";
  src: url("/assets/fonts/anton/anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ─────────── design-system.css ─────────── */

/* Typography */

h1 {
    font-family: 'Plus Jakarta Sans';
    font-size: var(--fs-h1);
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 1.21;
}

h2 {
    font-family: 'Plus Jakarta Sans';
    font-size: var(--fs-h2);
    font-weight: 500;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 1.21;
}

h3 {
    font-family: 'Plus Jakarta Sans';
    font-size: var(--fs-h3);
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 1.21;
}

h4 {
    font-family: 'Plus Jakarta Sans';
    font-size: var(--fs-h4);
    font-weight: 500;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 1.21;
}

h5 {
    font-family: 'Plus Jakarta Sans';
    font-size: var(--fs-h5);
    font-weight: 500;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 1.21;
}

p {
    font-family: 'Plus Jakarta Sans';
    font-size: var(--fs-body);
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.4;
}

.p-bold {
    font-family: 'Plus Jakarta Sans';
    font-size: var(--fs-body);
    font-weight: 600;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.4;
}

.p-light {
    font-family: 'Plus Jakarta Sans';
    font-size: var(--fs-light);
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.4;
}

.p-small {
    font-family: 'Plus Jakarta Sans';
    font-size: var(--fs-small);
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.4;
}

/* mot mis en avant dans un titre (en orange) */
.title-highlight {
    color: var(--color-orange);
}

.text-span {
    font-family: 'Plus Jakarta Sans';
    font-size: var(--fs-light);
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.4;
}

body {
    font-family: var(--font-main);
    font-weight: 500;
    color: var(--color-dark);
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

   
:root {
  /* ── Colors ── */

    /* primary color */

    --color-orange: #FF814D;
    --color-dark: #1D1D1D;
    --color-alt-dark: #060606;
    --color-grey: #F2F2F2;
    --color-alt-grey: #F5F5F5;
    --color-white: #FFFFFF;
    --color-red: #FF0000;

    /* muted color */

    --color-muted-orange: #FFFCFB;
    --color-muted-dark: #606060;
    --color-muted-dark2: #9F9F9F;
    --color-muted-white: #999999;
    --color-muted-red: #FFF5F5;

    /* Hover color */ 

    --color-hover-orange: #DF6B3B;

    /* btn selection color */ 

    --color-bg-hover-selection: #FFFAF8;
    --color-border-hover-selection: #FFDBCC;
    --color-bg-active-selection: #FFF6F3;
    --color-border-active-selection: #FF814D;

  /* Fonts sizing */

    --font-main: 'Plus Jakarta Sans', sans-serif;

    /* Titres fluides */
    --fs-h1: clamp(2rem, 1.78rem + 0.94vw, 2.625rem);   
    --fs-h2: clamp(1.5rem, 1.37rem + 0.56vw, 1.875rem);  
    --fs-h3: clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem); 
    --fs-h5: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);     

    /* Petits textes*/
    --fs-h4: 1rem;
    --fs-body: 1rem;
    --fs-light: 0.875rem;
    --fs-small: 0.75rem;

    /* ── Mise en page ── */
    --header-height: 4rem;   /* barre de navigation : 64 px */

    /* ── Transitions ── */
    --transition-fast:   0.2s ease;
    --transition-base:   0.4s ease;
    --transition-slow:   0.6s ease;
    --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

}


/* 2. Components */


/* ─────────── components/animations.css ─────────── */

/* ============================================================
   ENTRÉE EN SCÈNE DU HERO (au chargement de l'accueil)
   Les éléments arrivent l'un après l'autre : petite phrase, titre,
   bouton, puis le carrousel des modèles. Le reste de la page s'affiche
   normalement.

   - CSS seul : rien à charger en plus, l'effet démarre dès l'affichage.
   - animation-fill-mode « backwards » : l'élément est invisible pendant
     son délai, puis l'animation ne laisse aucune trace une fois finie
     (l'effet de survol du bouton, qui utilise translate, reste intact).
   - Pour régler : --hero-delay = départ, chaque élément ajoute son décalage.
   ============================================================ */

@keyframes hero-in {
    from {
        opacity: 0;
        translate: 0 1.25rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes hero-carousel-in {
    from {
        opacity: 0;
        translate: 0 2.5rem;
        scale: 0.97;
    }
    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

.hero-part {
    --hero-delay: 0.1s;
    --hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-title .text-span,
.hero-title h1,
.hero-part .btn-hero {
    animation: hero-in 0.8s var(--hero-ease) backwards;
}

.hero-title .text-span { animation-delay: var(--hero-delay); }
.hero-title h1         { animation-delay: calc(var(--hero-delay) + 0.12s); }
.hero-part .btn-hero   { animation-delay: calc(var(--hero-delay) + 0.28s); }

/* le carrousel arrive en dernier, un peu plus lentement */
.hero-part .template-viewport {
    animation: hero-carousel-in 1.1s var(--hero-ease) calc(var(--hero-delay) + 0.42s) backwards;
}

/* animations réduites dans les réglages du système : tout s'affiche directement */
@media (prefers-reduced-motion: reduce) {
    .hero-title .text-span,
    .hero-title h1,
    .hero-part .btn-hero,
    .hero-part .template-viewport {
        animation: none;
    }
}


/* ============================================================
   CHANGEMENT DE PAGE : fondu enchaîné entre deux pages du site
   (navigateurs récents ; les autres changent de page normalement)
   ============================================================ */

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.25s;
}


/* ============================================================
   ENTRÉE DES PAGES (toutes sauf l'accueil, qui a son hero animé)
   Au chargement seulement : les premiers blocs de <main> montent en
   fondu, l'un après l'autre. Le reste de la page s'affiche normalement.
   ============================================================ */

@keyframes page-in {
    from {
        opacity: 0;
        translate: 0 0.75rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

body:not(.is-home) main > :nth-child(-n + 4) {
    animation: page-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

body:not(.is-home) main > :nth-child(2) { animation-delay: 0.08s; }
body:not(.is-home) main > :nth-child(3) { animation-delay: 0.16s; }
body:not(.is-home) main > :nth-child(4) { animation-delay: 0.24s; }


/* ============================================================
   IMAGES EN COURS DE CHARGEMENT (js/image-loading.js)
   Un reflet gris passe sur l'emplacement de l'image, puis l'image
   apparaît en fondu. Sans JavaScript : les images s'affichent normalement.
   ============================================================ */

@keyframes image-shimmer {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}

@keyframes image-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.is-image-loading {
    background-color: #efefef;
    background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: image-shimmer 1.4s ease-in-out infinite;
}

.is-image-loading img {
    opacity: 0;
}

.is-image-loaded img {
    animation: image-in 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }

    body:not(.is-home) main > :nth-child(-n + 4) {
        animation: none;
    }

    .is-image-loading {
        animation: none;
    }

    .is-image-loaded img {
        animation: none;
    }
}


/* ─────────── components/buttons.css ─────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    width: fit-content;
    height: fit-content;
    padding: 0.75em 1em;
}

/* btn orange */

.btn-primary {
    color: var(--color-white);
    background-color: var(--color-orange);
    border-radius: 999em;

    /* Ombres */
    -webkit-box-shadow: 0px 5px 15px 0px rgba(255,129,77,0.25); 
    box-shadow: 0px 5px 15px 0px rgba(255,129,77,0.25);

    transition: 
        background-color 0.4s ease,
        translate 0.4s ease;
}

.btn-primary:hover {
    background-color: var(--color-hover-orange);
    translate: 0 -2px;
}

/* btn hero */

@property --btn-hero-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 180deg;
}

@property --btn-hero-end-stop {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 72%;
}

@property --btn-hero-end-color {
    syntax: '<color>';
    inherits: false;
    initial-value: #FF814D;
}

.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--color-white);
    background-color: #FF814D;
    background: linear-gradient(var(--btn-hero-angle), #FEB47A 0%, var(--btn-hero-end-color) var(--btn-hero-end-stop));
    border: 0.08em solid #FFF1D6;
    border-radius: 999em;

    transition:
        --btn-hero-angle var(--transition-base),
        --btn-hero-end-stop var(--transition-base),
        translate 0.4s ease,
        --btn-hero-end-color var(--transition-base);

    /* Ombres */

    -webkit-box-shadow: 0px 4px 15px 0px rgba(255,210,77,0.25); 
    box-shadow: 0px 4px 15px 0px rgba(255,210,77,0.25);
}

.btn-hero:hover {
    --btn-hero-angle: 175deg;
    --btn-hero-end-stop: 100%;
    --btn-hero-end-color: #F59851;
    translate: 0 -2px;
}

/* btn square orange */

.btn-square-orange {
    color: var(--color-white);
    background-color: var(--color-orange);
    border-radius: 0.625rem;

    transition: background-color 0.2s ease;
}

@supports (corner-shape: squircle) {
    .btn-square-orange {
        border-radius: 8px;
        corner-shape: squircle;
    }
}

.btn-square-orange:hover {
    background-color: var(--color-hover-orange);
}

/* btn square white */

.btn-square-white {
    color: var(--color-alt-dark);
    background-color: var(--color-white);
    border-radius: 0.625rem;
    border: 0.08rem solid var(--color-muted-dark);

    transition: color 0.1s ease, border 0.1s ease;
}

.btn-square-white:hover {
    color: var(--color-orange);
    border: 0.08rem solid var(--color-orange);

}

/* btn pill orange */

.btn-pill-orange {
    color: var(--color-orange);
    background-color: transparent;
    border: 0.08rem solid var(--color-orange);
    border-radius: 999rem;

    /* Ombres */ 
    transition: background-color 0.4s ease, color 0.4s ease;
}

.btn-pill-orange:hover {
    color: var(--color-white);
    background-color: var(--color-orange);
}

/* btn pill dark */
 
.btn-pill-dark {
    color: var(--color-white);
    background-color: var(--color-dark);
    border: 0.08rem solid var(--color-dark);
    border-radius: 999rem;

    transition: 
        color 0.4s ease,
        background-color 0.4s ease,
        box-shadow 0.4s ease;

    /* Ombres */ 
}

.btn-pill-dark:hover {
    color: var(--color-white);
    background-color: var(--color-alt-dark);

    -webkit-box-shadow: 0px 5px 15px 0px rgba(6,6,6,0.25); 
    box-shadow: 0px 5px 15px 0px rgba(6, 6, 6, 0.148);
}

/* btn selection */

.btn-square-selection {
    color: var(--color-dark);
    background-color: var(--color-white);
    border-bottom: 0.08rem solid var(--color-muted-dark2);

    transition: background-color 0.2s ease, border-bottom 0.2s ease;
}

.btn-square-selection:hover {
    background-color: var(--color-bg-hover-selection);
    border-bottom: 0.08rem solid var(--color-border-hover-selection);
}

.btn-square-selection:has(input:checked) {
    color: var(--color-dark);
    background-color: var(--color-bg-active-selection);
    border-bottom: 0.08rem solid var(--color-border-active-selection);
}

.btn-square-selection:has(input:focus-visible) {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

legend {
    margin-bottom: 1em;
    padding-top: 3em;
}

/* Checkbox */

/* Commom design = Espacement texte ↔ case, alignement */
.filter-checkbox {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    cursor: pointer;    
}

/* Forme de la case (taille, bordure, arrondi) + état neutre */
.filter-checkbox input{
    appearance: none;
    display: grid;

    place-content: center;

    width: 1.125rem;
    height: 1.125rem;

    background-color: var(--color-white);
    border: 0.15rem solid var(--color-muted-dark);
    border-radius: 10%;
    cursor: pointer;

    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.filter-group {
    width: 30%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 1rem;
}

    /* check design */
.filter-checkbox input::before {
    content: "";
    width: 0.75em;
    height: 0.75em;
    background-color: var(--color-white);
    mask: url("/assets/icons/check.svg") center / contain no-repeat;
    scale: 0;
    transition: scale 0.2s ease;
}

    /* neutral hover state */
.filter-checkbox:hover input:not(:disabled) {
    border-color: var(--color-orange);
}

/* check state */
.filter-checkbox input:checked {    
    border-color: var(--color-orange);
    background-color: var(--color-orange);
}

.filter-checkbox input:checked::before {
    scale: 1;
}

/* muted state */
.filter-checkbox input:disabled {
    border-color: var(--color-muted-dark2);
}

    /* État MUTED : le texte du label */
.filter-checkbox:has(input:disabled) {
    color: var(--color-muted-dark2);
    cursor: not-allowed;
}

/* keyboard focus */
.filter-checkbox input:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}


/* ─────────── components/cards.css ─────────── */

/* template demo cards */

.template-viewport {
    --card-w: 32cqw;    
    --card-w-active: 40cqw;  
    --card-gap: 1.5rem;
    --card-tilt: 12deg;      
    --card-tilt-max: 16deg;   
    --card-ratio: 2798 / 1632;  

    position: relative;
    padding-bottom: 3rem;         
    width: 100%;                  
    container-type: inline-size;   /* 1cqw = 1 % de la largeur de la fenêtre */
    overflow-x: clip;
    overflow-y: visible;
}

.template-container {
    position: relative;
    perspective: 1600px;

    height: calc(var(--card-w-active) / (var(--card-ratio)));
}


.template-card {
    --offset: 0;
    --side: 0;
    --distance: 0;
    --scale: calc(var(--card-w) / var(--card-w-active));


    --first-step: calc(var(--card-w-active) / 2 + var(--card-gap) + var(--card-w) / 2);
    --step: calc(var(--card-w) + var(--card-gap));

    position: absolute;
    top: 0;
    left: calc(50% - var(--card-w-active) / 2);
    width: var(--card-w-active);

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    cursor: pointer;

    transform:
        translateX(calc(var(--side) * var(--first-step) + (var(--offset) - var(--side)) * var(--step)))
    
        rotateY(clamp(
            calc(var(--card-tilt-max) * -1),
            calc(var(--offset) * var(--card-tilt) * -1),
            var(--card-tilt-max)
        ))
        scale(var(--scale));
    will-change: transform;   

    transition:
        transform 0.5s cubic-bezier(0.65, 0, 0.35, 1),
        translate 0.4s ease,
        opacity 0.4s ease;

    z-index: calc(100 - var(--distance));
}

.template-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
    background-color: var(--color-white);
    pointer-events: none;        

    opacity: min(calc(var(--distance) * 0.15), 0.6);
    transition: opacity 0.4s ease;
}

.template-is-active {
    --scale: 1;
    cursor: pointer;            /* l'aperçu ouvre la page du modèle (carousel.js) */
}

.template-card:hover {
    translate: 0 -6px;
}

.template-card:hover::after {
    opacity: 0;                   
}

.template-card picture {
    display: block;
    width: 100%;
}

.template-card img {
    width: 100%;
    height: auto;
    aspect-ratio: var(--card-ratio);   
    object-fit: cover;
    object-position: 50% 0;            /* le haut du site : nav + hero */
    border-radius: 0.75rem;            /* coins légèrement arrondis */
}

/* carte active avec un aperçu long : le site défile par paliers, comme à
   la molette (hero → section suivante → bas), puis remonte au hero.
   La courbe s'applique à chaque mouvement : départ et arrêt nets. */
@keyframes template-preview-scroll {
    0%, 10%   { object-position: 50% 0; }
    17%, 35%  { object-position: 50% 62%; }
    42%, 60%  { object-position: 50% 100%; }
    69%, 100% { object-position: 50% 0; }
}

/* 3 s d'attente avant le premier mouvement : le temps d'arriver sur la
   page et de regarder le haut du site (puis 1 s de plus, début du cycle) */
.template-is-active .template-preview {
    animation: template-preview-scroll 10s cubic-bezier(0.7, 0, 0.2, 1) 3s infinite;
}

/* au survol, l'aperçu s'arrête pour qu'on puisse regarder */
.template-is-active:hover .template-preview {
    animation-play-state: paused;
}

.template-link {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.75rem;

    display: flex;
    gap: 0.2rem;
    width: 100%;
    height: fit-content;
    justify-content: flex-start;
    padding-left: 1rem;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.text-template {
    font-size: 0.8em;
}

/* légende longue sur desktop, courte sur mobile */
.caption-short {
    display: none;
}

.template-is-active .template-link {
    opacity: 1;
    visibility: visible;
}

.template-link a {
    display: inline-flex;
    align-items: center;  
    gap: 0.25rem;
}

/* survol de la carte active : toute la légende devient un lien visible
   (métier, « Voir le site » et la flèche, qui suit currentColor) */
.text-template {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.25em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

@media (hover: hover) {
    .template-is-active:hover .text-template,
    .template-link a:focus-visible {
        color: var(--color-orange);
        text-decoration-color: currentColor;
    }
}

.template-link img {
    width: 1rem;
    height: 1rem;    
}

.template-controls {
    position: absolute;
    bottom: 0;
    right: calc(50% - var(--card-w-active) / 2);

    display: flex;
    gap: 0.5rem;
}

.template-controls button {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background-color: var(--color-bg-active-selection);
    color: var(--color-orange);
    cursor: pointer;

    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) {
    .template-controls button:not(:disabled):hover {
        background-color: var(--color-orange);
        color: var(--color-white);
    }
}

.template-controls button:disabled {
    opacity: 0.4;
    cursor: default;
}

.template-controls button:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

.icon-arrow-right {
    --icon: url(/assets/icons/arrowRight.svg);
    width: 10px;
    height: 8px;
}

.template-prev .icon {
    rotate: 180deg;         
}

/* points de pagination : utilisés sur mobile uniquement */
.template-dots {
    display: none;
}

.template-dots button {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: none;
    border-radius: 999rem;
    background-color: var(--color-muted-dark2);
    cursor: pointer;

    transition: width 0.3s ease, background-color 0.3s ease;
}

.template-dots button[aria-current="true"] {
    width: 1.5rem;                /* le point actif s'allonge */
    background-color: var(--color-orange);
}

.template-dots button:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .template-container,
    .template-card,
    .template-dots button {
        transition: none;
    }

    .template-is-active .template-preview {
        animation: none;
    }
}

/* ── Mobile ── */

@media (max-width: 767px) {

    .template-viewport {
        /* captures mobiles en portrait, carte active au centre et un morceau
           des voisines visible sur chaque bord */
        --card-w: 50cqw;
        --card-w-active: 60cqw;
        --card-gap: 0.75rem;
        --card-tilt: 0deg;        /* pas de rotation : nuit à la lisibilité sur petit écran */
        --card-ratio: 962 / 1864;

        padding-bottom: 5rem;     /* légende + points */

        touch-action: pan-y;      /* le défilement vertical reste au navigateur, le glissement horizontal au carrousel */
    }

    /* légende centrée sous la carte active */
    .template-link {
        justify-content: center;
        padding-left: 0;
    }

    .caption-long {
        display: none;
    }

    .caption-short {
        display: inline;
    }

    /* les points remplacent les flèches */
    .template-controls {
        display: none;
    }

    .template-dots {
        position: absolute;
        bottom: 1rem;
        left: 0;
        right: 0;

        display: flex;
        justify-content: center;
        gap: 0.4rem;
    }
}

/* ------------------
    Benefits cards 
 ------------------ */

.benefit-box {
    flex: 1;                  /* même largeur pour les 3 */
    min-height: 25rem;       /* hauteur minimale si tu veux de l'air */
    gap: 1.5rem;
    /* supprime height: 50vh */

    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-between;

    background-color: var(--color-grey) ;
    padding: 1.5rem 1rem;
    border-radius: 5%;
    border: 0.08rem solid #e4e4e4;

    -webkit-box-shadow: -2px 3px 10px 5px rgba(0,0,0,0.05); 
    box-shadow: -2px 3px 10px 5px rgba(0,0,0,0.05);
}

.benefit-box-title {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    align-self: center;

    width: 80%;
    text-align: center;
}

.benefit-box img {
    width: 100%;              /* le cadre prend toute la largeur de la boîte */
    height: 15rem;            /* hauteur du cadre : c'est LE réglage */
    object-fit: contain;      /* l'image tient dans le cadre sans se déformer */
    margin-top: auto;         /* le cadre est poussé en bas de la boîte */
}

/* ---------------------
   More Benefits cards 
 ----------------------- */

.more-benefits-container {
    display: flex;
    gap: 1.5rem;

    width: 90%;
    height: fit-content;
    justify-items: center;
    justify-content: space-between;
    padding: 1rem;

    background-color: var(--color-grey) ;
    padding: 1.5rem 1rem;
    border-radius: 10px;
    border: 0.08rem solid #e4e4e4;

    -webkit-box-shadow: -2px 3px 10px 5px rgba(0,0,0,0.05); 
    box-shadow: -2px 3px 10px 5px rgba(0,0,0,0.05); 
}

.more-benefit {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;

}

.benefit-icon-title {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

.benefit-icon-title img {
    aspect-ratio: 1;
    width: 20px;
    height: 20px;
}


/* ─────────── components/nav.css ─────────── */

/* barre de navigation (.nav-container, et pas « nav » : le site a d'autres <nav>,
   comme le sommaire des articles ou le footer).
   Hauteur fixée par --header-height (design-system.css),
   aussi utilisée par la page produit et la page Contact pour tenir dans l'écran */
.nav-container {
    width: 90%;
    height: var(--header-height);
    justify-self: center;
    align-self: center;
    padding: 0;
}

.nav-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo{
    width: fit-content;
    height: fit-content;
    z-index: 200;
}

.nav-logo img{
    width: auto;
    height: 22px;
}

.nav-link {
    width: fit-content;
    height: fit-content;
    font-size: 1em;
}

/* lien de la page actuelle : orange + trait affiché en permanence */
.nav-inline > li > a[aria-current="page"],
.nav-dropdown:has([aria-current="page"]) .nav-dropdown-toggle {
    color: var(--color-orange);
}

.nav-inline > li > a[aria-current="page"]::after {
    width: 100%;
}


.nav-inline {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    .nav-inline > li > a,
    .nav-dropdown-toggle {
        font-size: 0.9375rem;      /* 15 px */
    }

    .nav-contact .btn {
        padding: 0.55em 1.15em;    /* environ 40 px de haut */
        font-size: 0.9375rem;
    }
}

.nav-inline > li > a {
    position: relative;
    transition: color 0.2s ease;
}

.nav-inline > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 0;
    height: 2px;
    background-color: var(--color-orange);
    transform: translateX(-50%);
    transition: width 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.icon {
    display: inline-block;
    background-color: currentColor;
    mask: var(--icon) no-repeat center / contain;
    -webkit-mask: var(--icon) no-repeat center / contain;
}
.icon-arrow-down { 
    --icon: url(/assets/icons/arroxDown.svg);      width: 9px; 
    height: 6px; 
}
.icon-arrow-top-right { 
    --icon: url(/assets/icons/arrownTopRight.svg); width: 7px; 
    height: 7px; 
}


.link-icon {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

/* Menu déroulant */

.nav-dropdown {
    position: relative;
    
}

.dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    /* pont invisible entre « Modèles » et le menu : la souris peut descendre
       sans fermer le menu */
    height: calc(var(--header-height) / 2 + var(--dropdown-gap));
}

.dropdown-menu {
    --dropdown-gap: 0.75rem;      /* écart entre le bas de la nav et le menu */

    position: absolute;
    /* calé sur le bas de la barre, pas sur le mot « Modèles » : le lien est
       centré dans la barre, donc son milieu (50 %) + la moitié de la barre
       = le bas de la barre */
    top: calc(50% + var(--header-height) / 2 + var(--dropdown-gap));
    left: 50%;
    translate: -50% 0;            /* centré sous « Modèles » */
    z-index: 100;

    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 2rem;
    width: 46rem;
    padding: 1.75rem 1.75rem 1.5rem;
    border: 1px solid #e8e8e8;
    border-radius: 0.75rem;
    background-color: var(--color-white);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);

    /* fermé : masqué de haut en bas (clip-path), pour se dérouler à l'ouverture.
       Les marges négatives laissent passer l'encoche et l'ombre une fois ouvert.
       Fermeture rapide : simple fondu, le masque se replace ensuite. */
    opacity: 0;
    visibility: hidden;
    clip-path: inset(-1rem -3rem 100% -3rem);
    transition:
        opacity 0.15s ease,
        visibility 0s linear 0.15s,
        clip-path 0s linear 0.15s;
}

/* encoche : rappelle d'où le menu se déroule (sous « Modèles ») */
.dropdown-menu::after {
    content: "";
    position: absolute;
    top: -0.4rem;
    left: 50%;
    width: 0.8rem;
    height: 0.8rem;
    border-top: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
    border-top-left-radius: 0.15rem;
    background-color: var(--color-white);
    transform: translateX(-50%) rotate(45deg);
}

.dropdown-separator {
    width: 100%;
    height: 0.06rem;
    background-color: #f1f1f1;
}

.nav-dropdown.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    clip-path: inset(-1rem -3rem -4rem -3rem);
    transition:
        opacity 0.25s ease,
        visibility 0s,
        clip-path 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

/* contenu du menu : en cascade à l'ouverture (fade-up, décalé selon --i,
   posé dans nav-models.php) ; tout disparaît d'un coup à la fermeture */
@media (min-width: 768px) {
    .dropdown-menu .mega-label,
    .dropdown-menu .mega-feature,
    .dropdown-menu .mega-item {
        opacity: 0;
        transform: translateY(8px);
        transition:
            opacity 0.12s ease,
            transform 0.12s ease,
            background-color 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease;
    }

    .nav-dropdown.is-open .mega-label,
    .nav-dropdown.is-open .mega-feature,
    .nav-dropdown.is-open .mega-item {
        --delay: calc(80ms + var(--i, 0) * 60ms);
        opacity: 1;
        transform: none;
        transition:
            opacity 0.35s ease var(--delay),
            transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) var(--delay),
            background-color 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dropdown-menu,
    .nav-dropdown.is-open .dropdown-menu {
        clip-path: none;
    }

    .dropdown-menu .mega-label,
    .dropdown-menu .mega-feature,
    .dropdown-menu .mega-item,
    .nav-dropdown.is-open .mega-label,
    .nav-dropdown.is-open .mega-feature,
    .nav-dropdown.is-open .mega-item {
        transform: none;
        transition-delay: 0s;
    }
}

/* la flèche pivote quand le menu est ouvert */
.nav-dropdown .icon-arrow-down {
    transition: transform 0.2s ease;
}
.nav-dropdown.is-open .icon-arrow-down {
    transform: rotate(180deg);
}

/* ── Menu Modèles (site/snippets/nav-models.php) ── */

.mega-col {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

/* trait vertical entre la vitrine et les choix */
.mega-col-choices {
    padding-left: 2rem;
    margin-left: -0.25rem;
    border-left: 1px solid #efefef;
}

/* intitulé de colonne : petit, gris, en capitales */
.mega-label {
    padding-inline: 0.25rem;
    color: #8a8a8a;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mega-col-choices .mega-label {
    padding-inline: 1rem;         /* aligné sur le texte des choix */
}

/* vitrine à gauche : un modèle à découvrir, comme une carte produit */
.mega-feature {
    flex: 1;                      /* même hauteur que la colonne des choix */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #ececec;
    border-radius: 0.55rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* l'image prend la hauteur restante : la carte fait exactement la hauteur
   des 3 choix (height: 0 + flex: 1 → l'image ne pousse pas le menu) */
.mega-feature-media {
    position: relative;
    flex: 1;
    height: 0;
    min-height: 0;
    overflow: hidden;
    border-bottom: 1px solid #efefef;
}

.mega-feature-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;    /* les titres des heros commencent à gauche */
}

/* changement d'aperçu (js/nav.js) : la nouvelle image se pose par-dessus
   l'ancienne et apparaît en fondu, sans passer par le blanc */
.mega-feature-img.is-entering {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.mega-feature-img.is-entering.is-visible {
    opacity: 1;
}

.mega-feature-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 0.9rem 0.9rem;
    transition: opacity 0.12s ease;
}

/* textes : simple fondu pendant le changement */
.mega-feature-body.is-changing {
    opacity: 0;
}

.mega-feature-metier {
    color: var(--color-muted-dark);
    font-size: 0.6875rem;
}

.mega-feature-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

/* les 3 choix, empilés à droite : ils donnent la hauteur du menu */
.mega-choices {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mega-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.95rem 1rem;
    border-radius: 0.55rem;
    transition: background-color 0.2s ease;
}

.mega-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.mega-item-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.mega-item-title .icon {
    transition: translate 0.2s ease;
}

/* nombre de modèles, à droite */
.mega-item-side {
    color: var(--color-muted-dark);
    font-size: 0.75rem;
    white-space: nowrap;
}

.mega-item-text {
    color: var(--color-muted-dark);
    font-size: 0.75rem;
    line-height: 1.4;
}

/* « Tous les modèles » : le choix principal, séparé des deux secteurs */
.mega-item-all {
    margin-bottom: 0.5rem;
    background-color: #f6f6f6;
}

.mega-item-all .mega-item-title {
    font-size: 0.9375rem;
}

/* page actuelle (liste des modèles) : repère discret */
.mega-item-all[aria-current="page"] .mega-item-title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Breakpoints
   mobile  : < 768px
   tablette: 768px – 1023px
   desktop : ≥ 1024px */

.nav-burger {
    display: none;
}

/* Tablette version à faire plus tard */

/* mobile version */

@media (hover: hover) {
    .nav-inline > li > a:hover { 
        color: var(--color-orange);
    }

    .nav-inline > li > a:hover::after { 
        width: 100%;
    }

    .mega-item:hover {
        background-color: #f4f4f4;
    }

    .mega-item-all:hover {
        background-color: #eeeeee;
    }

    .mega-item:hover .mega-item-title .icon,
    .mega-feature:hover .mega-item-title .icon {
        translate: 3px 0;
    }

    .mega-feature:hover {
        border-color: #dcdcdc;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    }
}

@media (max-width: 767px) {

    .nav-mobile-none {
        display: none;
    }

    .mobile-logo {
        padding: 1rem 1.5rem ;
    }

    .nav-burger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 200; /* reste cliquable au-dessus du panneau */
    }

    .nav-burger {
        align-items: flex-end;
    }

    .nav-burger span {
        width: 22px;
        height: 1.5px;
        border-radius: 1px;
        background-color: currentColor;
        transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
    }

    .nav-burger span:nth-child(2) {
        width: 14px;
    }

    /* le panneau */
    /* le panneau : plein écran, en verre dépoli clair (fond blanc à 85 % +
       flou fort de la page derrière) : on devine le site, le texte reste net */
    .nav-link {
        position: fixed;
        inset: 0;
        z-index: 150;
        display: flex;
        flex-direction: column;

        width: 100%;
        height: 100dvh;
        /* marge de gauche = celle du logo (5 % de la barre + 1,5 rem) : liens alignés dessous */
        padding: 8rem calc(5vw + 1.5rem) 3rem;
        overflow-y: auto;
        overflow-x: hidden;

        background-color: rgba(255, 255, 255, 0.85);
        -webkit-backdrop-filter: blur(28px) saturate(160%);
        backdrop-filter: blur(28px) saturate(160%);
        color: var(--color-dark);

        /* caché : en fondu, avec un léger glissement */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-0.75rem);
        transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
    }

    .nav-dropdown-toggle {
        pointer-events: none;
        cursor: default;
    }

    .nav-dropdown-toggle .icon-arrow-down {
    display: none;
    }

    .nav-dropdown-toggle::after {
        display: none;             
    }

    .dropdown-menu {
        position: static;
        width: 100%;
        left: auto;
        margin-top: 0.75rem;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        border-radius: 0;

        opacity: 1;
        /* « inherit » et pas « visible » : sinon le sous-menu reste cliquable
           (invisible) par-dessus la page quand le menu mobile est fermé */
        visibility: inherit;
        clip-path: none;
        transform: none;
        transition: none;
    }

    .dropdown-menu::before {
    display: none;
    }

    /* menu mobile : les 3 choix empilés (la vitrine est masquée) */
    .dropdown-menu {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        translate: none;
    }


    .dropdown-menu::after {
        display: none;
    }

    .mega-col-choices {
        padding-left: 0;
        margin-left: 0;
        border-left: none;
    }

    .dropdown-menu {
        margin-top: 0.9rem;
        margin-bottom: 0.4rem;
        gap: 0;
    }

    .mega-choices {
        gap: 0.6rem;
    }

    .mega-item,
    .mega-item-all {
        margin: 0;
        padding: 0.2rem 0 0.2rem 0.1rem;
        border-radius: 0;
        background: none;
    }

    .mega-item-title,
    .mega-item-all .mega-item-title {
        color: #3d3d3d;
        font-size: 1rem;
        font-weight: 400;
    }

    .mega-item-side,
    .mega-item-text {
        display: none;
    }

    .nav-container.is-menu-open .nav-link {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    }

    /* navigateurs sans flou : fond presque opaque pour rester lisible */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .nav-link {
            background-color: rgba(255, 255, 255, 0.97);
        }
    }

    /* menu ouvert : logo et croix foncés, sur le verre clair */
    .nav-container.is-menu-open .nav-logo img {
        filter: none;
    }

    .nav-container.is-menu-open .nav-burger {
        color: var(--color-dark);
    }

    /* liens empilés */
    .nav-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(0.75rem, 2.2vh, 1.25rem);   /* plus serré sur les écrans peu hauts */
    }

    /* pas de traits entre les liens ; « Contact » visible dans le menu */
    .nav-inline > .dropdown-separator {
        display: none;
    }

    .nav-inline > li.nav-desktop-none {
        display: block;
    }

    .nav-mobile-title,
    .nav-inline > li > a.nav-mobile-title,
    .nav-dropdown-toggle.nav-mobile-title {
        color: #5c5c5c;                /* gris foncé : lisible même quand le verre passe sur du noir */
        font-size: clamp(2.25rem, 11vw, 2.75rem);
        font-weight: 300;
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    /* page en cours : en noir, plus gras que les autres liens (trait fin) */
    .nav-inline > li > a[aria-current="page"],
    .nav-dropdown:has([aria-current="page"]) .nav-dropdown-toggle.nav-mobile-title {
        color: var(--color-dark);
        font-weight: 600;
    }

    .nav-inline > li > a::after,
    .nav-inline > li > a[aria-current="page"]::after {
        display: none;
    }


    /* le burger se transforme en croix */
    .nav-container.is-menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-container.is-menu-open .nav-burger span:nth-child(2) { opacity: 0; }
    .nav-container.is-menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

}
/* ── Accueil : barre en verre dépoli, posée sur le fond du hero ──
   La barre est fixée en haut de l'écran ; le hero remonte jusqu'en haut
   de la page, derrière elle. Le flou est porté par un calque ::before et
   non par <header> lui-même : un backdrop-filter sur un parent
   « emprisonnerait » le panneau plein écran du menu mobile (position: fixed). */

.is-home header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: grid;              /* garde .nav-container centré (justify-self) */
}

.is-home header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.04);
}

/* bouton Contact sur l'accueil : bouton plein, qui ressort sur le verre coloré.
   ⚠ Ces règles l'emportent sur .btn-pill-orange (buttons.css) sur l'accueil :
   c'est ICI qu'il faut modifier ses couleurs pour l'accueil. */
.is-home .nav-contact .btn {
    border-color: var(--color-orange);
    background-color: var(--color-orange);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(255, 129, 77, 0.3);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .is-home .nav-contact .btn:hover {
        border-color: var(--color-hover-orange);
        background-color: var(--color-hover-orange);
        box-shadow: 0 6px 16px rgba(255, 129, 77, 0.4);
    }
}

/* les ancres (#faq…) ne s'arrêtent pas sous la barre */
html:has(.is-home) {
    scroll-padding-top: var(--header-height);
}

/* menu Modèles ouvert : la barre passe en blanc plein, comme le menu */
@media (min-width: 768px) {
    .is-home header::before {
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .is-home header:has(.nav-dropdown.is-open)::before {
        background-color: var(--color-white);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom-color: #ececec;
    }
}

/* ── Nav sombre au-dessus des zones sombres (classe posée par js/nav.js) ──
   Accueil : le verre devient sombre ; page produit : voir template-page.css. */

header .nav-logo img,
header .nav-inline > li > a,
header .nav-dropdown-toggle {
    transition: color 0.3s ease, filter 0.3s ease;
}

.is-home header.is-dark::before {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background-color: var(--dark-bg, #111111);
}

header.is-dark .nav-logo img {
    filter: brightness(0) invert(1);    /* logo d'une seule couleur → blanc */
}

/* ordinateur : liens en blanc (sur mobile, ils sont dans le panneau blanc) */
@media (min-width: 768px) {
    header.is-dark .nav-inline > li > a,
    header.is-dark .nav-dropdown-toggle {
        color: var(--color-white);
    }

    /* la page en cours reste orange */
    header.is-dark .nav-inline > li > a[aria-current="page"],
    header.is-dark .nav-dropdown:has([aria-current="page"]) .nav-dropdown-toggle {
        color: var(--color-orange);
    }
}

@media (min-width: 768px) and (hover: hover) {
    header.is-dark .nav-inline > li > a:hover,
    header.is-dark .nav-dropdown-toggle:hover {
        color: var(--color-orange);
    }
}

/* mobile : icône du menu en blanc ; panneau ouvert (blanc) : logo et icône foncés */
header.is-dark .nav-burger {
    color: var(--color-white);
}

/* menu ouvert (verre clair) : logo et croix foncés, même au-dessus d'une zone sombre */
header.is-dark .nav-container.is-menu-open .nav-burger {
    color: var(--color-dark);
}

header.is-dark .nav-container.is-menu-open .nav-logo img {
    filter: none;
}

/* menu Modèles ouvert : la nav repasse en blanc, comme le menu */
@media (min-width: 768px) {
    .is-home header.is-dark:has(.nav-dropdown.is-open)::before {
        border-bottom-color: #ececec;
        background-color: var(--color-white);
    }

    header.is-dark:has(.nav-dropdown.is-open) .nav-logo img {
        filter: none;
    }

    header.is-dark:has(.nav-dropdown.is-open) .nav-inline > li > a,
    header.is-dark:has(.nav-dropdown.is-open) .nav-dropdown-toggle {
        color: var(--color-dark);
    }

    header.is-dark:has(.nav-dropdown.is-open) .nav-inline > li > a[aria-current="page"],
    header.is-dark:has(.nav-dropdown.is-open) .nav-dropdown:has([aria-current="page"]) .nav-dropdown-toggle {
        color: var(--color-orange);
    }
}

/* navigateurs sans flou : fond plus opaque pour rester lisible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .is-home header::before {
        background-color: rgba(255, 255, 255, 0.92);
    }
}


/* ─────────── components/footer.css ─────────── */

/* ============================================================
   COMPOSANT FOOTER
   Marque à gauche, 4 colonnes de liens, barre du bas.
   ============================================================ */

.site-footer {
    background-color: var(--color-alt-dark);
    color: var(--color-white);
}

.site-footer-inner {
    border-top: 1px solid rgba(255, 255, 255, 0.55);   /* même trait que les blocs au-dessus */
}

.site-footer a {
    transition: color 0.2s ease;
}

.site-footer a:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
    border-radius: 0.2rem;
}

/* ── Partie principale ── */

.site-footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2.6fr);
    gap: 3rem;
    padding-block: 5rem 6rem;
}

.site-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.site-footer-brand img {
    width: 8rem;
    height: auto;
}

.site-footer-brand p {
    max-width: 23rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.6;
}

.site-footer-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
}

.site-footer-heading {
    margin-bottom: 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.site-footer-col a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

@media (hover: hover) {
    .site-footer-col a:hover,
    .site-footer-bottom a:hover {
        color: var(--color-white);
    }
}

/* ── Barre du bas ── */

.site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding-block: 2.5rem 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);

    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8125rem;
}

/* la règle globale "p" impose 1rem : on reprend la taille de la barre */
.site-footer-bottom p {
    font-size: inherit;
}

.site-footer-bottom ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.site-footer-bottom a {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Tablette / mobile ── */

@media (max-width: 1023px) {
    .site-footer-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .site-footer-main {
        gap: 2.5rem;
        padding-block: 3.5rem 4rem;
    }

    .site-footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem 1.5rem;
    }

    .site-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ─────────── components/demo.css ─────────── */



/* ── Section ── */

.demo-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;

    width: 100%;
    padding-block: 8rem;

    background-image: url(/assets/images/fond-bg-2.jpg);
    background-image: image-set(
        url(/assets/images/fond-bg-2.avif) type("image/avif"),
        url(/assets/images/fond-bg-2.jpg) type("image/jpeg")
    );
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    margin-top: 8rem;
}

.demo-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    width: min(90%, 40rem);
    text-align: center;
}

.demo-heading span {
    color: var(--color-orange);
}

.demo-heading p {
    color: var(--color-muted-dark2);
}

/* zone qui contient le site + le panneau qui le chevauche */
.demo-stage {
    position: relative;
    width: min(90%, 85rem);
    padding-bottom: 4rem;          /* place pour le panneau qui dépasse en bas */
}


/* ── Le site de démonstration ── */

.demo-site {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 1.5rem;

    color: var(--color-white);
    container-type: inline-size;   /* les textes du site suivent sa largeur (unités cqw) */
}

.demo-site-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* voile sombre : garde le texte lisible, même sur une image claire envoyée par le visiteur */
.demo-site::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

.demo-site-nav,
.demo-site-content {
    position: relative;
    z-index: 1;                    /* au-dessus du voile */
}

.demo-site-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.2cqw 3.5cqw;
    font-size: 0.85cqw;
}

.demo-site-brand {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.3cqw;
}

.demo-site-links {
    display: flex;
    gap: 2.2cqw;
}

.demo-site-links .is-current {
    text-decoration: underline;
    text-underline-offset: 0.6cqw;
}

.demo-site-contact {
    padding: 0.6cqw 1.3cqw;
    border: 1px solid currentColor;
    border-radius: 999rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.demo-site-content {
    position: absolute;
    left: 3.5cqw;                  /* aligné sur le logo du site (marge de la nav) */
    bottom: 12%;
    width: 50%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2cqw;
}

.demo-site-label {
    font-size: 0.75cqw;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0.8;
}

.demo-site-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 3.4cqw;
    font-weight: 400;
    line-height: 1.1;
    white-space: pre-line;         /* affiche les retours à la ligne tapés dans le panneau */
}

.demo-site-subtitle {
    font-size: 1.1cqw;
}

.demo-site-btn {
    margin-top: 1.5cqw;
    padding: 1.1cqw 1.8cqw;
    border-radius: 0.3cqw;
    background-color: #6b5a47;
    font-size: 0.75cqw;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* élément du site relié au champ en cours d'édition */
[data-demo-output] {
    border-radius: 0.2rem;
    outline: 1px dashed transparent;
    outline-offset: 0.4cqw;
    transition: outline-color 0.2s ease;
}

[data-demo-output].is-linked {
    outline-color: rgba(255, 255, 255, 0.7);
}


/* ── Le panneau d'édition (inspiré d'un CMS) ── */

.demo-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    width: min(36%, 32rem);
    padding: 1.25rem 1.25rem 2rem;
    border-radius: 1.25rem;
    background-color: #ececec;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);

    font-size: 0.75rem;
    color: var(--color-dark);
}

.demo-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.demo-panel-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.demo-reset {
    padding: 0.3rem 0.6rem;
    border: none;
    border-radius: 0.3rem;
    background: none;
    color: var(--color-muted-dark);
    font-size: 0.7rem;
    cursor: pointer;
}

.demo-reset:hover {
    color: var(--color-dark);
    background-color: rgba(0, 0, 0, 0.05);
}

.demo-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.demo-field-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.demo-field-label {
    font-weight: 600;
}

/* précision discrète à côté du titre du champ (ex. « 1920×1080 px recommandé ») */
.demo-field-hint {
    margin-left: 0.35rem;
    color: var(--color-muted-dark);
    font-size: 0.65rem;
    font-weight: 400;
}

.demo-field-help {
    color: var(--color-muted-dark);
    font-size: 0.7rem;
}

.demo-input {
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: 1px solid #dcdcdc;
    border-radius: 0.3rem;
    background-color: var(--color-white);
    font-size: 0.75rem;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.demo-input:focus {
    outline: none;
    border-color: var(--color-orange);
    box-shadow: 0 0 0 3px rgba(255, 129, 77, 0.15);
}

/* champ en cours de saisie automatique (animation de démonstration) */
.demo-input.is-typing {
    border-color: var(--color-orange);
}

.demo-textarea-wrap {
    border: 1px solid #dcdcdc;
    border-radius: 0.3rem;
    background-color: var(--color-white);
    overflow: hidden;
}

.demo-textarea-wrap:focus-within {
    border-color: var(--color-orange);
    box-shadow: 0 0 0 3px rgba(255, 129, 77, 0.15);
}

.demo-toolbar {
    display: flex;
    gap: 0.9rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #eee;
    color: #b5b5b5;
    font-size: 0.7rem;
}

.demo-textarea {
    border: none;
    border-radius: 0;
    resize: none;
    line-height: 1.5;
}

.demo-textarea:focus {
    box-shadow: none;
}

/* champ image */
.demo-select-btn {
    padding: 0.3rem 0.6rem;
    border-radius: 0.3rem;
    background-color: #dedede;
    font-size: 0.7rem;
    cursor: pointer;
}

.demo-select-btn:hover {
    background-color: #d2d2d2;
}

.demo-select-btn:has(input:focus-visible) {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

.demo-file-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem;
    border: 1px solid #dcdcdc;
    border-radius: 0.3rem;
    background-color: var(--color-white);

    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* une image est glissée au-dessus du champ */
.demo-file-row.is-dragover {
    border-color: var(--color-orange);
    background-color: var(--color-bg-active-selection);
}

.demo-file-thumb {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.2rem;
    object-fit: cover;
}

.demo-file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-file-remove {
    border: none;
    background: none;
    font-size: 0.9rem;
    color: var(--color-muted-dark);
    cursor: pointer;
}

/* message d'erreur de l'upload (vide = masqué) */
.demo-field-error {
    color: var(--color-red);
    font-size: 0.7rem;
}

.demo-field-error:empty {
    display: none;
}

.demo-field.has-error .demo-file-row {
    border-color: var(--color-red);
    background-color: var(--color-muted-red);
}


/* ── Apparence : typographie des titres et couleur du bouton ── */

/* titres du site selon la typographie choisie (data-font posé par demo.js) */
.demo-site[data-font="modern"] .demo-site-title,
.demo-site[data-font="modern"] .demo-site-brand {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.demo-site[data-font="impact"] .demo-site-title,
.demo-site[data-font="impact"] .demo-site-brand {
    font-family: 'Anton', Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.demo-site-btn {
    transition: background-color 0.25s ease, color 0.25s ease;
}

.demo-style {
    border: none;
    padding: 0;
    margin: 0;
}

.demo-style legend {
    margin-bottom: 0.4rem;
    padding: 0;
}

.demo-fonts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.demo-font {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.45rem 0.3rem;
    border: 1px solid #dcdcdc;
    border-radius: 0.3rem;
    background-color: var(--color-white);
    cursor: pointer;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.demo-font-sample {
    font-size: 1.1rem;
    line-height: 1.1;
}

.demo-font-name {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;  /* nom lisible, quelle que soit la typo */
    font-size: 0.65rem;
    color: var(--color-muted-dark);
}

.demo-font:hover {
    border-color: #c4c4c4;
}

.demo-font:has(input:checked) {
    border-color: var(--color-orange);
    box-shadow: 0 0 0 3px rgba(255, 129, 77, 0.15);
}

.demo-font:has(input:focus-visible),
.demo-color:has(input:focus-visible) {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

.demo-colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.demo-color {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

.demo-color:has(input:checked) {
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-orange);
}

/* « autre couleur » : pastille arc-en-ciel qui ouvre le sélecteur du navigateur */
.demo-color-custom {
    background: conic-gradient(#ff5a5a, #ffd24d, #5ad17a, #4da3ff, #b05aff, #ff5a5a);
}

.demo-color-custom input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.demo-color-custom.is-active {
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-orange);
}


/* ── Écran moyen : plus assez de hauteur pour superposer le panneau,
   il passe sous le site, sur toute la largeur et en deux colonnes ── */

@media (min-width: 768px) and (max-width: 1099px) {

    .demo-stage {
        padding-bottom: 0;
    }

    .demo-panel {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem 2rem;
        width: 100%;
        margin-top: -2rem;
    }

    .demo-panel-header {
        grid-column: 1 / -1;
    }
}


/* ── Mobile : le panneau passe sous le site ── */

@media (max-width: 767px) {

    .demo-part {
        padding-block: 5rem;
        gap: 2.5rem;
    }

    .demo-stage {
        padding-bottom: 0;
    }

    .demo-site {
        aspect-ratio: 4 / 5;           /* plus haut : le texte reste lisible */
        border-radius: 1rem;
    }

    .demo-site-nav {
        padding: 5cqw;
        font-size: 3cqw;
    }

    .demo-site-brand {
        font-size: 4.5cqw;
    }

    .demo-site-links {
        display: none;
    }

    .demo-site-content {
        left: 5cqw;                    /* aligné sur le logo, comme sur ordinateur */
        bottom: 8%;
        width: 90cqw;
        gap: 3cqw;
    }

    .demo-site-label { font-size: 2.6cqw; }
    .demo-site-title { font-size: 9cqw; }
    .demo-site-subtitle { font-size: 3.6cqw; }
    .demo-site-btn {
        padding: 3cqw 4.5cqw;
        font-size: 2.6cqw;
    }

    /* le panneau remonte légèrement sur le site pour garder le lien visuel */
    .demo-panel {
        position: relative;
        width: 100%;
        margin-top: -2rem;
        font-size: 0.875rem;           /* 16px dans les champs : évite le zoom auto d'iOS */
    }

    .demo-input {
        font-size: 1rem;
    }
}


/* ─────────── components/offer-slider.css ─────────── */

/* ============================================================
   SECTION "Un site internet complet pour votre quotidien"
   Slider horizontal de cartes fonctionnalités.
   Le défilement est natif (scroll-snap) : fluide, et glissement
   au doigt / trackpad gratuit. offer-slider.js ne gère que les
   flèches et les points.
   ============================================================ */

.content-offer {
    /* marge latérale du contenu : 5 % de l'écran, ou plus pour centrer
       le contenu dans 80rem sur très grand écran */
    --offer-gutter: max(5vw, calc((100vw - 80rem) / 2));
    --offer-card-w: clamp(16rem, 24vw, 22rem);
    --offer-gap: 1.5rem;

    width: 100%;
    padding-block: 8rem;
    margin-top: 10rem;

    background-color: #000;          /* fond noir : choix définitif */
    color: var(--color-white);
}

.content-offer-first {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    width: 100%;
}

/* titre à gauche, texte à droite, alignés sur la marge du contenu */
.content-offer .content-offer-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding-inline: var(--offer-gutter);
}

.content-offer-title h2 {
    max-width: 28rem;
}

.content-offer-title p {
    max-width: 26rem;
    font-size: 0.9rem;
    opacity: 0.85;
    color: var(--color-muted-white);
}


/* ── La piste qui défile ── */

.content-offer-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;                     /* entre les cartes et les points / flèches */
}

.content-offer-list {
    display: flex;
    gap: var(--offer-gap);

    /* la piste occupe toute la largeur de l'écran : les cartes commencent
       sur la marge du contenu et dépassent à droite */
    padding-inline-start: var(--offer-gutter);
    padding-block: 0.5rem;           /* place pour le léger zoom au survol */

    overflow-x: auto;
    overscroll-behavior-x: contain;  /* le glissement ne fait pas "reculer" la page sur trackpad */
    scroll-snap-type: x mandatory;   /* le défilement s'arrête toujours au début d'une carte */
    scroll-padding-inline: var(--offer-gutter);

    scrollbar-width: none;           /* barre de défilement masquée (Firefox) */
}

.content-offer-list::-webkit-scrollbar {
    display: none;                   /* barre de défilement masquée (Chrome, Safari) */
}

/* espace après la dernière carte (le padding de fin est ignoré par
   certains navigateurs dans une zone qui défile) */
.content-offer-list::after {
    content: "";
    flex: 0 0 max(1px, calc(var(--offer-gutter) - var(--offer-gap)));
}

.content-offer-list:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 4px;
}


/* ── Une carte ── */

.content-offer-box {
    position: relative;
    flex: 0 0 var(--offer-card-w);
    aspect-ratio: 349 / 500;         /* format des images offer1 à offer6 */
    overflow: hidden;
    border-radius: 0.75rem;
    isolation: isolate;              /* le zoom de l'image reste sous le texte */
    scroll-snap-align: start;
}

.content-offer-box picture,
.content-offer-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
}

.content-offer-image {
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* zone de protection : voile noir en dégradé derrière le texte,
   pour qu'il reste lisible même sur une image claire (offer6) */
.content-offer-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.4) 22%,
        rgba(0, 0, 0, 0.12) 42%,
        rgba(0, 0, 0, 0) 58%
    );
    pointer-events: none;
}

.content-offer-text {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.5rem;
    
}

.content-offer-text .p-bold {
    font-size: 1.05rem;
}

.content-offer-text .p-small {
    opacity: 0.55;
}

/* le texte des cartes est blanc, même si une règle globale colore les <p> */
.content-offer-text p {
    color: var(--color-white);
}

@media (hover: hover) {
    .content-offer-box:hover .content-offer-image {
        transform: scale(1.04);
    }
}


/* ── Points + flèches ── */

.content-offer-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* points centrés, flèches à droite */
    align-items: center;
    padding-inline: var(--offer-gutter);
}

.content-offer-dots {
    grid-column: 2;
    display: flex;
    gap: 0.4rem;
}

.content-offer-dots button {
    width: 0.4rem;
    height: 0.4rem;
    padding: 0;
    border: none;
    border-radius: 999rem;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;

    transition: width 0.3s ease, background-color 0.3s ease;
}

.content-offer-dots button[aria-current="true"] {
    width: 1.75rem;                  /* le point actif s'allonge */
    background-color: var(--color-white);
}

.content-offer-arrows {
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: 0.5rem;
}

.content-offer-arrow {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    cursor: pointer;

    transition: background-color 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) {
    .content-offer-arrow:not(:disabled):hover {
        background-color: rgba(255, 255, 255, 0.3);
    }
}

.content-offer-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.content-offer-prev .icon {
    rotate: 180deg;
}

.content-offer-dots button:focus-visible,
.content-offer-arrow:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .content-offer-image,
    .content-offer-dots button {
        transition: none;
    }
}


/* ── Mobile ── */

@media (max-width: 767px) {

    .content-offer {
        --offer-gutter: 1.5rem;
        --offer-card-w: 75vw;           /* une carte + un morceau de la suivante */
        --offer-gap: 1rem;

        padding-block: 5rem;
    }

    .content-offer-first {
        gap: 2.5rem;
    }

    .content-offer .content-offer-title {
        flex-direction: column;
        gap: 1rem;
    }

    /* au doigt, on glisse : les flèches deviennent inutiles */
    .content-offer-arrows {
        display: none;
    }
}


/* ─────────── components/presentation.css ─────────── */

/* ============================================================
   PRÉSENTATION : phrase de positionnement puis galerie de sites
   Animation pilotée par le défilement.

   presentation.js écrit sur .presentation-stage la variable --p :
     --p < 0   la zone arrive à l'écran
     --p = 0   la scène se fige (début du blocage du défilement)
     --p = 1   la scène se libère (le défilement normal reprend)

   Chaque élément transforme --p en sa propre progression (0 → 1) avec
   clamp(0, (p - début) / durée, 1). Pour changer le minutage, il suffit
   de modifier les chiffres de début et de durée ci-dessous.
   Seuls transform et opacity sont animés : fluide à 60 fps.
   ============================================================ */

/* la zone haute qu'on traverse pendant que la scène reste figée :
   plus elle est haute, plus l'animation dure longtemps au défilement */
.presentation-pin {
    height: 320vh;
    margin-top: 6rem;
}

/* la scène figée à l'écran */
.presentation-stage {
    --p: -1;

    position: sticky;
    /* sous la barre de navigation fixe de l'accueil */
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    height: calc(100svh - var(--header-height));   /* hauteur visible réelle sur mobile */
    overflow: clip;                 /* coupe les rangées d'images sur les côtés */

    display: grid;
    /* colonne bloquée à la largeur de l'écran : sans ça, les rangées
       (plus larges que l'écran) élargissent la grille et décentrent tout */
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    color: var(--color-white);
}

/* la phrase et la galerie occupent la même case de la grille : elles se superposent */
.presentation-phrase,
.presentation-gallery {
    grid-area: 1 / 1;
}


/* ── Phase 1 et 2 : la phrase arrive par le bas, puis part en fondu vers le haut ── */

.presentation-phrase {
    --in:  clamp(0, calc((var(--p) + 0.3) / 0.3), 1);    /* de p = -0.3 à 0    */
    --out: clamp(0, calc((var(--p) - 0.25) / 0.2), 1);   /* de p = 0.25 à 0.45 */

    max-width: 30rem;
    padding-inline: 1.5rem;
    text-align: center;
    font-weight: 500;

    opacity: calc(var(--in) - var(--out));
    transform: translateY(calc((1 - var(--in)) * 4rem - var(--out) * 4rem));
    will-change: transform, opacity;
}


/* ── Phase 3 : la photo, le logo et les captures apparaissent ── */

.presentation-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 100%;
}

.presentation-identity {
    --show: clamp(0, calc((var(--p) - 0.42) / 0.2), 1);   /* de p = 0.42 à 0.62 */

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;

    opacity: var(--show);
    transform: translateY(calc((1 - var(--show)) * 2rem)) scale(calc(0.9 + var(--show) * 0.1));
    will-change: transform, opacity;
}

.presentation-photo {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    object-fit: cover;
}

.presentation-logo {
    width: 10rem;
    height: auto;
}

.presentation-rows {
    /* largeur d'une capture : 30 % de l'écran, plafonnée à 28rem, sauf sur
       très grand écran (22 % minimum, pour que les rangées couvrent toujours
       toute la largeur pendant le mouvement) */
    --shot-w: clamp(16rem, 30vw, max(28rem, 22vw));
    --shot-gap: 1rem;
    --drift: 18vw;                          /* distance parcourue par chaque rangée */

    display: flex;
    flex-direction: column;
    gap: var(--shot-gap);
    width: 100%;
}

.presentation-row {
    display: flex;
    gap: var(--shot-gap);
    width: max-content;
    will-change: transform, opacity;
}

/* chaque rangée apparaît, décalée de la précédente,
   puis glisse pendant tout le défilement : la 1re vers la gauche,
   la 2e vers la droite, pour donner une impression de mouvement.
   7 captures par rangée : la 4e est centrée, et les rangées dépassent
   des deux bords de l'écran pendant tout le mouvement */
.presentation-row-1 {
    --show: clamp(0, calc((var(--p) - 0.48) / 0.22), 1);   /* de p = 0.48 à 0.70 */
    --move: clamp(0, calc((var(--p) + 0.3) / 1.6), 1);      /* de p = -0.3 à 1.3  */

    margin-left: calc(50vw - var(--shot-w) * 3.5 - var(--shot-gap) * 3);
    opacity: var(--show);
    transform: translate(calc(var(--move) * var(--drift) * -1), calc((1 - var(--show)) * 3rem));
}

/* décalée d'une demi-capture par rapport à la 1re : effet "mur de briques" */
.presentation-row-2 {
    --show: clamp(0, calc((var(--p) - 0.55) / 0.22), 1);   /* de p = 0.55 à 0.77 */
    --move: clamp(0, calc((var(--p) + 0.3) / 1.6), 1);

    margin-left: calc(50vw - var(--shot-w) * 4 - var(--shot-gap) * 3.5);
    opacity: var(--show);
    transform: translate(calc(var(--move) * var(--drift)), calc((1 - var(--show)) * 3rem));
}

/* ── Balancement automatique des rangées ──
   Une fois les cartes apparues, chaque rangée va et vient en continu,
   en plus du mouvement lié au défilement. Il utilise la propriété
   "translate", indépendante de "transform" : les deux s'additionnent.
   La 2e rangée part dans le sens inverse de la 1re. */

.presentation-rows {
    --sway: 6vw;            /* amplitude du balancement de chaque côté */
    --sway-duration: 14s;   /* durée d'un aller-retour complet */
}

@keyframes presentation-sway {
    0%   { translate: 0 0; }
    25%  { translate: calc(var(--sway) * -1) 0; }
    75%  { translate: var(--sway) 0; }
    100% { translate: 0 0; }
}

.presentation-row {
    animation: presentation-sway var(--sway-duration) ease-in-out infinite;
    animation-play-state: paused;     /* en pause tant que les cartes ne sont pas apparues */
}

.presentation-row-2 {
    animation-direction: reverse;
}

/* presentation.js ajoute is-swaying quand les cartes sont apparues
   et que la section est à l'écran */
.presentation-stage.is-swaying .presentation-row {
    animation-play-state: running;
}

.presentation-shot {
    flex: 0 0 var(--shot-w);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.08);   /* visible tant que l'image charge */
}

.presentation-shot img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: top;           /* montre le haut des sites (nav + hero) */
}


/* ── Mobile ── */

@media (max-width: 767px) {

    .presentation-pin {
        height: 280vh;
        margin-top: 4rem;
    }

    .presentation-rows {
        --shot-w: 65vw;
        --shot-gap: 0.75rem;
        --drift: 35vw;
        --sway: 12vw;
    }

    .presentation-photo {
        width: 4.5rem;
        height: 4.5rem;
    }

    .presentation-logo {
        width: 8rem;
    }
}


/* ── Animations désactivées : tout est affiché, sans blocage du défilement ── */

@media (prefers-reduced-motion: reduce) {

    .presentation-pin {
        height: auto;
    }

    .presentation-stage {
        position: static;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 4rem;
        padding-block: 4rem;
    }

    .presentation-phrase,
    .presentation-identity,
    .presentation-row-1,
    .presentation-row-2 {
        opacity: 1;
        transform: none;
    }

    .presentation-row {
        animation: none;
    }
}


/* ─────────── components/blocks.css ─────────── */

/* ============================================================
   BLOCS SOMBRES DE FIN DE PAGE (FAQ, dernières publications)
   En-tête partagé : trait en haut, titre à gauche, "+" à droite.
   ============================================================ */

.faq,
.latest-posts {
    --block-text: var(--color-white);
    --block-muted: rgba(255, 255, 255, 0.6);
    --block-line: rgba(255, 255, 255, 0.55);       /* trait entre les blocs */
    --block-line-soft: rgba(255, 255, 255, 0.2);   /* trait entre les questions */

    width: 100%;
    background-color: var(--color-alt-dark);
    color: var(--block-text);
}

/* largeur de contenu commune aux blocs et au footer */
.faq-inner,
.latest-posts-inner,
.site-footer-inner {
    width: min(90%, 80rem);
    margin-inline: auto;
}

.block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--block-line);
}

.block-title {
    font-size: var(--fs-h3);
    font-weight: 500;
}

/* le "+" : un bouton (FAQ) ou un lien (publications) */
.block-plus {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;

    transition: background-color 0.2s ease;
}

@media (hover: hover) {
    .block-plus:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

.block-plus:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

/* croix "+" dessinée en CSS (deux traits) ; devient "−" quand c'est ouvert */
.block-plus-icon {
    position: relative;
    width: 1rem;
    height: 1rem;
}

.block-plus-icon::before,
.block-plus-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background-color: currentColor;
    transition: transform 0.3s ease;
}

.block-plus-icon::after {
    transform: rotate(90deg);
}

.block-plus[aria-expanded="true"] .block-plus-icon::after {
    transform: rotate(0deg);
}

/* ── Contenu repliable (bouton +/− de l'en-tête, voir blocks.js) ──
   Astuce de la grille 1fr → 0fr : anime la hauteur jusqu'à 0 sans
   connaître la hauteur réelle du contenu */

.block-content {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.block-content.is-collapsed {
    grid-template-rows: 0fr;
}

.block-content-inner {
    min-height: 0;                 /* indispensable pour que la ligne puisse descendre à 0 */
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.block-content.is-collapsed .block-content-inner {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .block-content,
    .block-content-inner {
        transition: none;
    }
}


/* ─────────── components/product-card.css ─────────── */

/* ============================================================
   COMPOSANT CARTE MODÈLE (site/snippets/product-card.php)
   Carte blanche bordée : aperçu en haut, puis métier (petit, gris),
   nom du modèle (gras) et prix (gras, à droite). Au survol : la carte
   se soulève, rond avec flèche sur l'image + léger zoom.
   ============================================================ */

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;                             /* cartes d'une même rangée à la même hauteur */
    overflow: hidden;
    border: 1px solid #e8e8e8;
    border-radius: 0.375rem;
    background-color: var(--color-white);
    color: var(--color-dark);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.product-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid #efefef;         /* sépare l'aperçu (souvent clair en bas) du texte */
    background-color: var(--color-grey);      /* visible tant que l'image charge */
}

.product-card-media img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: top;                     /* montre le haut du site (nav + hero) */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* aperçu long : le haut du site au repos ; le défilement par paliers
   (survol et lecture automatique) est animé par js/preview-scroll.js */
.product-card-media.has-preview img {
    object-position: 50% 0;
}

/* rond blanc avec flèche, caché jusqu'au survol */
.product-card-arrow {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;

    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--color-white);
    color: var(--color-dark);

    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.product-card-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding: 0.75rem 0.9rem 0.85rem;
}

.product-card-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

/* pour qui : la première chose qu'on cherche */
.product-card-metier {
    color: var(--color-muted-dark);
    font-size: 0.6875rem;
}

.product-card-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
}

.product-card-price {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

/* survol (souris) et focus clavier : même retour visuel */
@media (hover: hover) {
    .product-card:hover {
        transform: translateY(-3px);
        border-color: #dcdcdc;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    }

    .product-card:hover .product-card-media img {
        transform: scale(1.03);
    }

    .product-card:hover .product-card-arrow {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-card:focus-visible {
    outline: none;
}

.product-card:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 3px;
}

.product-card:focus-visible .product-card-arrow {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-card-media img,
    .product-card-arrow {
        transition: none;
    }
}

/* écran tactile : pas de survol, la flèche reste visible */
@media (hover: none) {
    .product-card-arrow {
        opacity: 1;
        transform: none;
    }
}


/* ─────────── components/form.css ─────────── */

/* ============================================================
   CHAMPS DE FORMULAIRE (fenêtre de demande, page contact...)
   États : neutre, focus (orange), erreur (rouge), suggestion.
   ============================================================ */

.field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.field label {
    font-size: 0.875rem;
    font-weight: 600;
}

.field-optional {
    color: var(--color-muted-dark2);
    font-weight: 400;
}

.field-input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid #ececec;
    border-radius: 0.5rem;
    background-color: #f6f7f9;
    font-size: 0.8125rem;

    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

textarea.field-input {
    resize: vertical;
    line-height: 1.5;
}

.field-input::placeholder {
    color: var(--color-muted-dark2);
}

.field-input:focus {
    outline: none;
    border-color: var(--color-orange);
    background-color: var(--color-white);
    box-shadow: 0 0 0 3px rgba(255, 129, 77, 0.15);
}

/* erreur : fond rose, bordure rouge */
.field.has-error .field-input {
    border-color: var(--color-red);
    background-color: var(--color-muted-red);
}

.field.has-error .field-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);
}

.field-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}

.field-error {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-red);
    font-size: 0.75rem;
}

.field-error:empty {
    display: none;
}

/* pastille "!" devant le message */
.field-error::before {
    content: "!";
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: 0.55rem;
    font-weight: 700;
}

/* "Vouliez-vous dire ? xxx@gmail.com" */
.field-suggest {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--color-dark);
    font-size: 0.75rem;
}

.field-suggest[hidden] {
    display: none;
}

.field-suggest-btn {
    padding: 0.2rem 0.6rem;
    border: none;
    border-radius: 999rem;
    background-color: #ececec;
    font-size: 0.75rem;
    cursor: pointer;
}

.field-suggest-btn:hover {
    background-color: #e0e0e0;
}

/* champ piège pour les robots : hors de l'écran, invisible pour les humains */
.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* message d'erreur général (envoi impossible) */
.form-status {
    color: var(--color-red);
    font-size: 0.8125rem;
}

.form-status:empty {
    display: none;
}

/* bouton pendant l'envoi */
button[type="submit"][aria-busy="true"] {
    opacity: 0.6;
    cursor: progress;
}

/* mention d'information sous les formulaires (RGPD) */
.form-privacy {
    color: var(--color-muted-dark2);
    font-size: 0.6875rem;
    line-height: 1.5;
}

.form-privacy a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.form-privacy a:hover {
    color: var(--color-orange);
}


/* ─────────── components/request-dialog.css ─────────── */

/* ============================================================
   FENÊTRE "DÉMARRONS VOTRE PROJET" (site/snippets/request-dialog.php)
   <dialog> natif : panneau à droite sur ordinateur, en bas sur mobile.
   ============================================================ */

.rq {
    position: fixed;
    inset: 0.6rem 0.6rem 0.6rem auto;
    /* la fenêtre occupe toute la hauteur de l'écran : tout tient sans défiler
       (sur un écran très bas, elle défile en dernier recours) */
    --rq-space: clamp(0.6rem, 2.2svh, 1.25rem);

    width: min(36rem, 100% - 1.2rem);
    max-width: none;
    height: calc(100% - 1.2rem);
    max-height: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: none;
    border-radius: 1.25rem;
    background-color: var(--color-white);
    color: var(--color-dark);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.rq::backdrop {
    background-color: rgba(30, 30, 30, 0.45);
}

.rq[open] {
    animation: rq-in 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.rq[open]::backdrop {
    animation: rq-fade 0.35s ease;
}

@keyframes rq-in {
    from { transform: translateX(2rem); opacity: 0; }
}

@keyframes rq-fade {
    from { opacity: 0; }
}

.rq-close {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background-color: #f1f1f1;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.rq-close:hover {
    background-color: #e4e4e4;
}

.rq[open] {
    display: flex;
    flex-direction: column;
}

.rq-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.rq-view[hidden] {
    display: none;
}

.rq-header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: calc(var(--rq-space) * 1.3) 4rem var(--rq-space) 1.5rem;
}

.rq-title {
    font-size: 1.3rem;
    font-weight: 600;
}

.rq-header p {
    font-size: 0.875rem;
}

.rq-section-title {
    font-size: 1rem;
    font-weight: 500;
}

/* ── Votre sélection ── */

.rq-selection {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: var(--rq-space) 1.5rem var(--rq-space) 3.25rem;
    border-bottom: 1px solid #e4e4e4;
    background-color: #f7f7f7;
}

.rq-selection-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.6rem;
}

.rq-edit {
    padding: 0;
    border: none;
    border-bottom: 1px solid currentColor;
    background: none;
    font-size: 0.6875rem;
    cursor: pointer;
}

.rq-edit:hover {
    color: var(--color-orange);
}

.rq-price {
    font-weight: 600;
}

/* carte récapitulative (remplie en JS) */
.rq-recap,
.rq-recap-success > div {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: 0.6rem;
    align-items: start;
}

.rq-recap {
    padding: 0.4rem;
    border: 1px solid #ddd;
    border-radius: 0.6rem;
    background-color: var(--color-white);
}

.rq-recap-img {
    grid-row: span 3;
    width: 100%;
    max-height: 7.5rem;
    aspect-ratio: 16 / 9.5;
    object-fit: cover;
    border-radius: 0.4rem;
}

.rq-recap-chip {
    padding: 0.4rem 0.6rem;
    border-radius: 0.25rem;
    background-color: #f1f1f1;
    font-size: 0.625rem;
}

.rq-recap .pp-swatches {
    height: 1.1rem;
    width: 100%;
}

.rq-recap-chip .pp-typo-body {
    display: block;
}

.rq-recap .pp-typo-title {
    display: block;
    font-size: 0.6875rem;
}

.rq-recap .pp-typo-body {
    font-size: 0.5rem;
}

/* ── Formulaire ── */

.rq-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: calc(var(--rq-space) * 0.7);
    padding: var(--rq-space) 1.5rem var(--rq-space) 3.25rem;
}

/* nom et téléphone sur une même ligne */
.rq-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.rq-form .field {
    gap: 0.3rem;
}

.rq-form .field-input {
    padding-block: 0.6rem;
}

/* "Votre activité" prend la place restante */
.rq-field-grow {
    flex: 1;
    min-height: 0;
}

.rq-field-grow .field-input {
    flex: 1;
    min-height: 3rem;
    resize: none;
}

.rq-submit {
    flex-shrink: 0;
    padding: 0.7rem;
    border: none;
    border-radius: 999rem;
    background-color: var(--color-orange);
    color: var(--color-white);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.rq-submit:hover {
    background-color: var(--color-hover-orange);
}

.rq-submit:focus-visible,
.rq-close:focus-visible,
.rq-edit:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

.rq-note {
    color: var(--color-muted-dark);
    font-size: 0.6875rem;
    text-align: center;
}

/* ── Confirmation ── */

.rq-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--rq-space) * 0.8);
    padding: clamp(2rem, 9svh, 6rem) 1.5rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
}

.rq-success-icon {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    background-color: var(--color-orange);
    -webkit-mask: none;
    position: relative;
}

/* coche dessinée en CSS */
.rq-success-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 1.1rem;
    height: 2rem;
    border: solid var(--color-white);
    border-width: 0 0.3rem 0.3rem 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.rq-success-title {
    font-size: 1.4rem;
    font-weight: 600;
}

.rq-success-title:focus {
    outline: none;
}

.rq-success-box {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: min(100%, 25rem);
    margin-top: clamp(1rem, 4svh, 3rem);
    padding: clamp(1rem, 3svh, 1.75rem) 2.25rem;
    border-radius: 2rem;
    background-color: #f4f4f4;
}

.rq-success-email {
    color: var(--color-orange);
}

.rq-recap-success {
    display: block;
    padding: 0.6rem;
    text-align: left;
}

.rq-recap-success .rq-price {
    margin-top: 0.4rem;
    font-size: 0.8125rem;
}

.rq-done {
    align-self: flex-end;
    margin-top: auto;
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    border-radius: 999rem;
    background: none;
    font-size: 0.8125rem;
    cursor: pointer;
}

.rq-done:hover {
    border-color: var(--color-dark);
}

@media (prefers-reduced-motion: reduce) {
    .rq[open],
    .rq[open]::backdrop {
        animation: none;
    }
}

/* ── Mobile : panneau qui monte du bas ── */

@media (max-width: 767px) {
    .rq {
        inset: auto 0 0 0;
        width: 100%;
        height: auto;
        max-height: 92svh;
        border-radius: 1.25rem 1.25rem 0 0;
    }

    @keyframes rq-in {
        from { transform: translateY(2rem); opacity: 0; }
    }

    .rq-selection {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding-inline: 1.25rem;
    }

    .rq-form {
        padding-inline: 1.25rem;
    }

    /* sur mobile, la fenêtre défile : "Votre activité" reprend une hauteur fixe */
    .rq-view,
    .rq-form,
    .rq-field-grow {
        flex: none;
    }

    .rq-field-grow .field-input {
        min-height: 5rem;
    }

    .rq-row {
        grid-template-columns: 1fr;
    }

    .rq-form .field-input {
        max-width: none;
        font-size: 1rem;      /* évite le zoom automatique d'iOS */
    }

    .rq-success {
        padding-top: 4rem;
    }
}


/* ─────────── components/faq.css ─────────── */

/* ============================================================
   COMPOSANT FAQ
   Accordéon natif : <details> / <summary> (fonctionne sans JS,
   au clavier et avec les lecteurs d'écran). faq.js ajoute
   seulement le bouton "+" qui déplie / replie tout.
   ============================================================ */

.faq {
    padding-top: 6rem;
}

/* colonne de gauche vide, questions à droite  */
.faq-list {
    display: grid;
    width: min(100%, 32rem);
    margin-left: auto;
    margin-right: 2.5rem;          /* aligné sous le "+" de l'en-tête */
    padding-bottom: 1rem;
}

.faq-item {
    border-bottom: 1px solid var(--block-line-soft);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding-block: 0.8rem;

    font-weight: 600;
    cursor: pointer;
    list-style: none;              /* retire le triangle par défaut */
}

.faq-question::-webkit-details-marker {
    display: none;                 /* retire le triangle par défaut (Safari) */
}

.faq-question:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* petit "+" qui tourne en "×" quand la question est ouverte */
.faq-icon {
    position: relative;
    flex-shrink: 0;
    width: 0.65rem;
    height: 0.65rem;
    margin-top: 0.45rem;
    transition: transform 0.3s ease;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    margin-top: -0.75px;
    background-color: currentColor;
}

.faq-icon::after {
    transform: rotate(90deg);
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    padding-bottom: 1rem;
    color: var(--block-muted);
}

.faq-answer p {
    font-size: 0.875rem;
    line-height: 1.55;
}

/* ouverture animée dans les navigateurs qui le permettent
   (Chrome / Edge récents) ; ailleurs, la réponse s'affiche d'un coup */
@supports (interpolate-size: allow-keywords) {
    .faq-item {
        interpolate-size: allow-keywords;
    }

    .faq-item::details-content {
        height: 0;
        overflow: clip;
        transition: height 0.35s ease, content-visibility 0.35s allow-discrete;
    }

    .faq-item[open]::details-content {
        height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-icon,
    .faq-item::details-content {
        transition: none;
    }
}

/* ── Mobile ── */

@media (max-width: 767px) {
    .faq {
        padding-top: 4rem;
    }

    .faq-list {
        width: 100%;
        margin-right: 0;
    }
}

/* « Toutes les questions » (page produit) : sous la liste, aligné sur elle */
.faq-more {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: min(100%, 32rem);
    margin: 0.5rem 2.5rem 1.5rem auto;
    color: var(--color-muted-dark);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.faq-more .icon {
    transition: translate 0.2s ease;
}

@media (hover: hover) {
    .faq-more:hover {
        color: var(--color-dark);
    }

    .faq-more:hover .icon {
        translate: 3px 0;
    }
}

@media (max-width: 767px) {
    .faq-more {
        margin-right: 0;
    }
}


/* ─────────── components/section-head.css ─────────── */

/* ============================================================
   EN-TÊTE DE SECTION : titre à gauche, posé sur un trait fin,
   avec à droite une indication ou un lien (« Tous les conseils → »).
   Utilisé par : liste des conseils, « À lire aussi » de l'article,
   « Autres modèles disponibles » de la page produit.
   Sur fond gris, le trait est un peu plus foncé (--section-head-line).
   ============================================================ */

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--section-head-line, #ececec);
}

.section-head-title {
    font-size: 1.15rem;
    font-weight: 600;
}

/* « 3 articles » : une indication, pas un titre */
.section-head-count {
    color: var(--color-muted-dark);
    font-size: 0.875rem;
}

.section-head-link {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.section-head-link .icon {
    transition: translate 0.2s ease;
}

@media (hover: hover) {
    .section-head-link:hover {
        color: var(--color-orange);
    }

    .section-head-link:hover .icon {
        translate: 3px 0;
    }
}

.section-head-link:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .section-head {
        margin-bottom: 1.5rem;
    }
}


/* ─────────── components/post-card.css ─────────── */

/* ============================================================
   COMPOSANT DERNIÈRES PUBLICATIONS + CARTE ARTICLE
   .post-card (site/snippets/post-card.php) est réutilisée par la
   page Conseils et « À lire aussi » de l'article.
   .article-meta (site/snippets/article-meta.php) : la ligne
   catégorie · date · lecture, sur les cartes et en haut de l'article.
   ============================================================ */

/* ── Catégorie · date · temps de lecture ── */

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    color: var(--color-muted-dark);
    font-size: 0.8125rem;
}

.article-meta > * + *::before {
    content: "·";
    margin-right: 0.5rem;
}

.article-meta-category {
    color: var(--color-dark);
    font-weight: 500;
}

/* sur fond sombre (Dernières publications de l'accueil) */
.latest-posts .article-meta {
    color: rgba(255, 255, 255, 0.6);
}

.latest-posts .article-meta-category {
    color: var(--color-white);
}

.latest-posts {
    padding-bottom: 6rem;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    padding-top: 1.5rem;
}

.post-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    color: inherit;
}

.post-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9.5;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: #d9d9d9;     /* gris visible tant qu'il n'y a pas d'image */
}

.post-card-media img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* petit rond blanc avec flèche, en bas à droite de l'image ;
   au survol, il s'ouvre en pastille « Voir l'article → » */
.post-card-arrow {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;

    display: flex;
    align-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: 0.45rem;
    border-radius: 999rem;
    background-color: var(--color-white);
    color: var(--color-dark);
    font-size: 0.6875rem;
    font-weight: 500;
}

.post-card-arrow-text {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease, margin 0.35s ease;
}

.post-card-arrow .icon {
    flex-shrink: 0;
    width: 8px;
    height: 6px;
}

/* sur les cartes, catégorie et date suffisent : la ligne reste sur une ligne */
.post-card .article-meta {
    margin-top: 0.4rem;
    font-size: 0.75rem;
}

.post-card .article-meta-time {
    display: none;
}

.post-card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

@media (hover: hover) {
    .post-card:hover .post-card-media img {
        transform: scale(1.04);
    }

    .post-card:hover .post-card-arrow-text {
        max-width: 6rem;
        margin-right: 0.3rem;
        margin-left: 0.15rem;
        opacity: 1;
    }
}

.post-card:focus-visible {
    outline: none;
}

.post-card:focus-visible .post-card-media {
    outline: 2px solid var(--color-orange);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .post-card-arrow-text,
    .post-card-media img {
        transition: none;
    }
}

/* ── Tablette / mobile ── */

@media (max-width: 1023px) {
    .post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .latest-posts {
        padding-bottom: 4rem;
    }

    /* une carte et le début de la suivante : on fait glisser au doigt */
    .post-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 75%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .post-grid::-webkit-scrollbar {
        display: none;
    }

    .post-card {
        scroll-snap-align: start;
    }
}


/* ─────────── components/prose.css ─────────── */

/* ============================================================
   TEXTE D'ARTICLE (.prose)
   Mise en forme du contenu rédigé dans l'éditeur par blocs :
   paragraphes, titres, listes, images, citations.
   ============================================================ */

.prose {
    color: var(--color-muted-dark);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.prose > * + * {
    margin-top: 1.25rem;
}

.prose p {
    font-size: inherit;
    line-height: inherit;
}

.prose p + p {
    margin-top: 1.25rem;
}

.prose strong {
    color: var(--color-dark);
    font-weight: 600;
}

.prose a {
    color: var(--color-orange);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.prose h2 {
    margin-top: 3.25rem;
    color: var(--color-dark);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    /* garde un peu d'air sous la nav quand on arrive par le sommaire */
    scroll-margin-top: 2rem;
}

@media (max-width: 767px) {
    .prose {
        font-size: 1rem;
    }

    .prose h2 {
        margin-top: 2.75rem;
        font-size: 1.3rem;
    }
}

.prose h3 {
    margin-top: 2rem;
    color: var(--color-dark);
    font-size: 1.125rem;
    font-weight: 600;
    scroll-margin-top: 2rem;
}

.prose h2 + * {
    margin-top: 1rem;
}

.prose h3 + * {
    margin-top: 0.6rem;
}

/* sous-partie juste après le titre de partie : un peu moins d'écart */
.prose h2 + h3 {
    margin-top: 1.25rem;
}

.prose ol,
.prose ul {
    padding-left: 1.75rem;
}

.prose ol {
    list-style: decimal;
}

.prose ul {
    list-style: disc;
}

.prose li + li {
    margin-top: 0.4rem;
}

.prose li {
    padding-left: 0.25rem;
}

.prose li::marker {
    color: var(--color-muted-dark2);
}

.prose figure {
    margin-block: 2.5rem;
}

.prose figure img {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

.prose figcaption {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    text-align: center;
}

.prose blockquote {
    margin-block: 2.5rem;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--color-orange);
    border-radius: 0 0.5rem 0.5rem 0;
    background-color: var(--color-bg-active-selection);
    color: var(--color-dark);
    font-weight: 500;
}


/* 3. Pages */


/* ─────────── pages/home.css ─────────── */

.nav-desktop-none {
    display: none;
}

.hero-part {
    width: 100%;
    min-height: 100vh;
    /* le fond monte sous la barre fixe : on décale le contenu d'autant */
    padding-top: var(--header-height);
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;

    background-image: url(/assets/images/bg-hero.jpg);
    background-image: image-set(
        url(/assets/images/bg-hero.avif) type("image/avif"),
        url(/assets/images/bg-hero.jpg) type("image/jpeg")
    );
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    align-items: center;
}

.hero-title {
    margin-top: 5rem;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    justify-content: center;
    text-align: center;
    text-justify: auto;

    color: var(--color-white);
}

.hero-title h1 {
    width: 70%;
    font-size: 2.5em;

    justify-self: center;
}

.hero-title > span {
    opacity: 0.8;
    font-size: 1em;
    font-weight: 400;

}

/* « Payé une fois. » et « À vous pour toujours. » ne se coupent jamais */
.hero-nowrap {
    white-space: nowrap;
}

.first-part {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 70vh;

    justify-content: center;
    align-items: center;
}

/* ------------------
    Benefits part 
 ------------------ */

.benefits-part {
    display: flex;
    min-height: 100vh;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 3rem;

    margin-top: 10rem;
}

.title-part-CTA {
    display: flex;
    gap: 2rem;
    flex-direction: column;
    align-items: center;

    width: 70%;
    height: fit-content;
    text-align: center;
}

.title-part-CTA span {
    color: var(--color-orange);
}

.benefits-cards-container {
    display: flex;
    gap: 1.5rem;

    width: 90%;
    height: fit-content;

    justify-items: center;
}

/* ---------------------
    other feature part 
 ----------------------- */

.other-feature {
    display: flex;
    flex-direction: column;
    width: 90%;
    gap: 4rem;
    align-content: center;
    align-items: center;

    min-height: 100vh;
    height: fit-content;
    margin-top: 8rem;
}

.other-feature-title {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.other-feature-title h2 {
    width: 30%;
}

.other-feature-title p {
    width: 50%;
}

.other-feature-container {
    display: flex;
    width: 100%;
    gap: 2rem;

}

.other-feature-box {
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 2rem;   
}

.other-feature-image {
    aspect-ratio: 1;
    border-radius: 1rem;
    border: 0.08rem solid var(--color-white);
    box-shadow: -2px 5px 12px 0px rgba(0,0,0,0.15);
}

/* ---------------------
   process part 
 ----------------------- */

.process-part {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    width: 90%;
    align-content: center;
    align-items: center;

    min-height: 100vh;
    height: fit-content;
}

.process-benefit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1rem;        
    max-width: 100%;
}

.process-benefit::after {
    content: "";
    flex-basis: 100%;        
    order: 1;                
}

.process-benefit-box:nth-child(n + 4) {
    order: 2;
}

.process-benefit-box {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 1rem;
    margin-block: 0.3rem; 
    padding: 0.8rem 1rem;

    background-color: var(--color-white);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 999rem;
}

.process-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.5rem;

    width: 90%;
    height: fit-content;
}

/* chaque étape reprend les 4 rangées de la grille (étiquette, titre, texte,
   image) : les images restent alignées même si un texte est plus long */
.process-box {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 1rem;
    align-content: start;
}

/* les 3 étapes en gras : on lit d'abord le titre de chaque partie */
.process-box h4 {
    font-weight: 600;
}

.process-label {
    background-color: #d8d7d7;
    width: fit-content;
    height: fit-content;
    padding: 0.6rem 1rem;
    border-radius: 10px;
}

/* ---------------------
    with me part 
 ----------------------- */

.with-me-part {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    width: 100%;
    align-self: center;
    align-content: center;
    align-items: center;

    min-height: 100vh;
    height: fit-content;
    margin-top: 10rem;
}

.with-me-container {
    display: flex;
    gap: 1.5rem;

    width: 90%;
    height: fit-content;

    justify-items: center;
    justify-content: center;
}

.without-me-color {
    background-color: var(--color-grey);
    box-shadow: -2px 7px 15px 0px rgba(2, 2, 2, 0.15);
    border: 0.08rem solid var(--color-white);

}

.with-me-color {
    background-color: var(--color-orange);
    box-shadow: -2px 7px 15px 0px rgba(255, 130, 77, 0.45);
}

.subtitle-white  {
    color: var(--color-white);
}

.with-me-box {
    flex: 1;
    max-width: 590px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    align-content: center;
    padding: 1.5rem 1rem;
    border-radius: 5%;
}

.with-me-illustration {
    width: auto;
    height: 50%;
}

.with-me-title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-content: center;
    align-items: center;
}

.with-me-name {
    display: flex;
    gap: 0.5rem;
    justify-content: center;  
}


.with-me-name h3 {
    color: var(--color-white);
}

.with-me-name img {
    width: auto;
    height: 2rem;

}

.with-me-benefits {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------------------
    content offer
 ----------------------- */

.content-offer-title {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

/* ── Mobile ── */

@media (max-width: 767px) {


    .first-part {
        height: auto;
        min-height: 62svh;
        padding: 2rem 1.5rem 3rem;  
        gap: 2.25rem;                
    }

    .hero-title {
        margin-top: 1rem;
        gap: 0.75rem;
    }

    .hero-title h1 {
        width: 100%;
        font-size: clamp(1.75rem, 7.5vw, 2.125rem);
    }

    .hero-title > span {
        font-size: 0.8125rem;
    }

    .benefits-cards-container {
        flex-direction: column;
        gap: 2rem;
        width: 80%;
        align-self: center;

    }

    .subtitle-benefit-mobile {
        width: 60%;
        text-align: center;
    }

    .more-benefits-container {
        flex-direction: column;
        width: 80%;        
    }
}


/* ── Mobile : de "Vous pouvez aller bien plus loin" à "Pourquoi payer chaque mois" ── */

@media (max-width: 767px) {

    /* les sections s'adaptent à leur contenu au lieu d'occuper tout l'écran */
    .other-feature,
    .process-part,
    .with-me-part {
        min-height: auto;
    }

    /* titres de section centrés : pleine largeur au lieu de 70 % */
    .title-part-CTA {
        width: 100%;
        gap: 1.25rem;
        padding-inline: 1.5rem;
    }

    /* ── Vous pouvez aller bien plus loin ── */

    .other-feature {
        width: 100%;
        gap: 2.5rem;
        margin-top: 5rem;
    }

    /* titre au-dessus du texte au lieu de côte à côte */
    .other-feature-title {
        flex-direction: column;
        gap: 1rem;
        padding-inline: 1.5rem;
    }

    .other-feature-title h2,
    .other-feature-title p {
        width: 100%;
    }

    /* les 3 fonctionnalités défilent au doigt, une par une,
       avec le début de la suivante visible */
    .other-feature-container {
        gap: 1rem;
        padding-inline: 1.5rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1.5rem;
        scrollbar-width: none;
    }

    .other-feature-container::-webkit-scrollbar {
        display: none;
    }

    .other-feature-box {
        flex: 0 0 80%;
        gap: 1.25rem;
        scroll-snap-align: start;
    }

    .other-feature-image {
        width: 100%;
        height: auto;
    }

    /* ── Comment allons-nous travailler ensemble ? ── */

    .process-part {
        width: 100%;
        gap: 2.5rem;
        margin-top: 5rem;
    }

    /* pastilles : retour à la ligne naturel (le 3 + 2 forcé ne tient pas) */
    .process-benefit {
        column-gap: 0.5rem;
        padding-inline: 1.5rem;
    }

    .process-benefit::after {
        display: none;
    }

    .process-benefit-box {
        gap: 0.5rem;
        margin-block: 0.25rem;
        padding: 0.55rem 0.85rem;
    }

    .process-benefit-box p {
        font-size: 0.875rem;
    }

    .process-benefit-box img {
        width: 1rem;
        height: 1rem;
    }

    /* les 3 étapes l'une sous l'autre : c'est une suite, on la lit dans l'ordre */
    .process-container {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        width: 100%;
        padding-inline: 1.5rem;
    }

    .process-box {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
    }

    .process-box > p:not(.process-label) {
        font-size: 0.9375rem;
    }

    .process-mobile {
        opacity: 0.65;
    }

    /* ── Pourquoi payer chaque mois ── */

    .with-me-part {
        gap: 2.5rem;
        margin-top: 6rem;
    }

    /* les deux cartes l'une sous l'autre */
    .with-me-container {
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        padding-inline: 1.5rem;
    }

    .with-me-box {
        max-width: none;
        gap: 1.25rem;
        padding: 2rem 1.25rem;
        border-radius: 1.5rem;     /* un arrondi en % devient ovale sur une carte haute */
    }

    .with-me-illustration {
        width: auto;
        height: 8rem;
    }

    .with-me-name img {
        height: 1.6rem;
    }

    .with-me-title span {
        text-align: center;
    }

    .with-me-benefits {
        gap: 0.5rem;
        width: 100%;
    }

    .with-me-benefits .process-benefit-box {
        max-width: 100%;
        margin-block: 0;
    }
}


/* ── Écrans larges : sections aérées ──
   « Qu'est-ce qui est à vous », « Vous pouvez aller bien plus loin »,
   « Pourquoi payer chaque mois… » : largeur de contenu plafonnée (au lieu de
   90 % de l'écran), plus d'espace entre les cartes et à l'intérieur.
   Le mobile et la tablette gardent leurs réglages. */

@media (min-width: 1024px) {

    /* titres de section : moins larges, ils passent sur 2 lignes équilibrées */
    .title-part-CTA {
        max-width: 48rem;
    }

    /* ── Qu'est-ce qui est à vous, exactement ? ── */

    .benefits-part {
        gap: 4.5rem;
    }

    .benefits-cards-container,
    .more-benefits-container {
        width: min(90%, 72rem);
        gap: 2.5rem;
    }

    .benefit-box {
        padding: 2.5rem 2rem;
        border-radius: 1.5rem;
    }

    .benefit-box-title {
        width: 100%;
        max-width: 20rem;
    }

    .benefit-box img {
        height: 13rem;
    }

    .more-benefits-container {
        padding: 2rem 2.5rem;
        border-radius: 1.25rem;
    }

    /* ── Vous pouvez aller bien plus loin ── */

    .other-feature {
        width: min(90%, 72rem);
        gap: 4.5rem;
    }

    .other-feature-title {
        align-items: flex-end;
        gap: 4rem;
    }

    .other-feature-title h2 {
        width: auto;
        flex: 1;
    }

    .other-feature-title p {
        width: auto;
        flex: 1;
        max-width: 30rem;
    }

    .other-feature-container {
        gap: 3rem;
    }

    .other-feature-box {
        gap: 1.5rem;
    }

    /* ── Comment allons-nous travailler ensemble ? ── */

    .process-part {
        width: min(90%, 72rem);
        gap: 4.5rem;
    }

    .process-container {
        width: 100%;            /* au lieu de 90 % de la section : même largeur que les autres */
        gap: 3rem;
    }

    /* ── Pourquoi payer chaque mois… ── */

    .with-me-part {
        gap: 4.5rem;
    }

    .with-me-container {
        width: min(90%, 66rem);
        gap: 3rem;
    }

    .with-me-box {
        max-width: none;
        padding: 2.5rem 2rem;
        gap: 1.5rem;
        border-radius: 1.75rem;   /* un arrondi en % devient ovale sur une carte haute */
    }
}


/* ── Écrans larges : espacement régulier entre les sections ──
   Les sections avaient une hauteur minimale d'un écran (min-height: 100vh) :
   sur un grand écran, la section restait bien plus haute que son contenu
   et laissait jusqu'à 900 px de vide. Elles prennent maintenant la hauteur
   de leur contenu, et un seul espacement les sépare toutes.
   (Le hero garde sa hauteur d'écran : c'est l'ouverture de la page.) */

@media (min-width: 1024px) {

    .benefits-part,
    .other-feature,
    .process-part,
    .with-me-part {
        min-height: 0;
    }

    .benefits-part,
    .demo-part,
    .other-feature,
    .process-part,
    .with-me-part,
    .content-offer {
        margin-top: clamp(7rem, 8vw, 9rem);   /* 112 à 144 px selon l'écran */
    }
    /* sections à fond (démo, offre) : marge intérieure plus courte, pour que
       marge + fond ne fassent pas un trou deux fois plus grand qu'ailleurs */
    .demo-part,
    .content-offer {
        padding-block: clamp(4.5rem, 5vw, 5.5rem);
    }
}


/* ============================================================
   ACCUEIL MOBILE : version plus courte et plus rythmée
   (utilisé avec les blocs « mobile-only » de home.php)
   ============================================================ */

/* blocs réservés au mobile (comparatif) */
.mobile-only {
    display: none;
}

/* « Plus de réglages » de la démo : mobile seulement */
.demo-more {
    display: none;
}

@media (max-width: 767px) {

    .mobile-only {
        display: block;
    }

    /* ── 6. textes alignés à gauche : plus lisible, et ça varie du tout centré ── */
    .title-part-CTA,
    .demo-heading {
        align-items: flex-start;
        text-align: left;
    }

    .title-part-CTA {
        padding-inline: 1.5rem;
    }

    .demo-heading {
        width: 100%;
        padding-inline: 1.5rem;
    }

    /* ── 1. « Ce qui est à vous » : les 3 cartes défilent au doigt ── */
    .benefits-part {
        min-height: auto;
        gap: 2rem;
        margin-top: 5rem;
    }

    .benefits-cards-container {
        flex-direction: row;
        gap: 0.9rem;
        width: 100%;
        padding-inline: 1.5rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1.5rem;
        scrollbar-width: none;
    }

    .benefits-cards-container::-webkit-scrollbar {
        display: none;
    }

    .benefit-box {
        flex: 0 0 82%;
        min-height: 0;
        gap: 1rem;
        padding: 1.5rem 1.25rem 1.25rem;
        border-radius: 1.25rem;
        scroll-snap-align: start;
        box-shadow: none;
    }

    .benefit-box-title {
        align-self: stretch;
        width: 100%;
        gap: 0.6rem;
        text-align: left;
    }

    .benefit-box-title p {
        color: var(--color-muted-dark);
        font-size: 0.9375rem;
        line-height: 1.5;
    }

    .benefit-box img {
        height: 9.5rem;
    }

    /* les 4 avantages : une grille 2 × 2 compacte */
    .more-benefits-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem 0.75rem;
        width: calc(100% - 3rem);
        padding: 1.25rem;
        border-radius: 1rem;
        box-shadow: none;
    }

    .more-benefit {
        align-items: flex-start;
    }

    .more-benefit h4 {
        font-size: 0.875rem;
        line-height: 1.3;
    }

    /* ── 7. démo : l'étiquette et le sous-titre derrière « Plus de réglages » ── */
    .demo-panel:not(.is-expanded) .demo-field-extra {
        display: none;
    }

    .demo-more {
        display: block;
        align-self: flex-start;
        padding: 0.35rem 0;
        border: none;
        background: none;
        color: var(--color-muted-dark);
        font-size: 0.8125rem;
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 0.2em;
        cursor: pointer;
    }

    /* ── 2. le processus : une frise compacte, sans images ── */
    .process-part {
        gap: 2rem;
    }

    /* pastilles en double des avantages, juste au-dessus */
    .process-benefit.nav-mobile-none {
        display: none;
    }

    .process-container {
        gap: 0;
        padding-inline: 1.5rem;
    }

    .process-box {
        position: relative;
        gap: 0.4rem;
        padding: 0 0 2rem 1.75rem;
    }

    /* la ligne de la frise, et un point par étape */
    .process-box::before {
        content: "";
        position: absolute;
        top: 0.45rem;
        bottom: -0.45rem;
        left: 0.3rem;
        width: 1px;
        background-color: #dcdcdc;
    }

    .process-box:last-child::before {
        display: none;
    }

    .process-box::after {
        content: "";
        position: absolute;
        top: 0.3rem;
        left: 0;
        width: 0.65rem;
        height: 0.65rem;
        border-radius: 50%;
        background-color: var(--color-orange);
    }

    .process-label {
        padding: 0;
        background: none;
        color: var(--color-orange);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .process-box .process-icon,
    .process-box img:not(.process-icon) {
        display: none;
    }

    .process-box h4 {
        font-size: 1.05rem;
    }

    .process-mobile {
        opacity: 1;
        color: var(--color-muted-dark);
        font-size: 0.9375rem;
        line-height: 1.55;
    }

    /* « Parlons de votre projet » : lien texte (action secondaire) */
    .home-cta-secondary.btn {
        align-self: flex-start;
        margin-left: 1.5rem;
        padding: 0;
        border: none;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: var(--color-dark);
        font-weight: 600;
        text-decoration: underline;
        text-decoration-color: var(--color-orange);
        text-underline-offset: 0.3em;
    }

    .home-cta-secondary.btn::after {
        content: " →";
    }

    /* ── 3. « Pourquoi payer chaque mois » : un comparatif face à face ── */
    .with-me-part {
        gap: 1.75rem;
        margin-top: 4.5rem;
    }

    .with-me-container {
        display: none;
    }

    .home-compare {
        width: calc(100% - 3rem);
        font-size: 0.875rem;
    }

    .home-compare-head,
    .home-compare-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 0.5rem;
    }

    .home-compare-head {
        align-items: center;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid #e2e2e2;
        color: var(--color-muted-dark);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .home-compare-head > :first-child {
        grid-column: 1 / -1;
    }

    /* « Avec » et le logo sur la même ligne, centrés l'un sur l'autre */
    .home-compare-head .home-compare-me {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        color: var(--color-dark);
        font-size: 0.8125rem;
        letter-spacing: 0;
        line-height: 1;
        text-transform: none;
    }

    .home-compare-head .home-compare-me img {
        display: block;
        width: auto;
        height: 0.8rem;
    }

    .home-compare-row {
        padding-block: 0.85rem;
        border-bottom: 1px solid #ececec;
    }

    .home-compare-label {
        grid-column: 1 / -1;
        margin-bottom: 0.3rem;
        color: var(--color-muted-dark);
        font-size: 0.75rem;
    }

    .home-compare-them,
    .home-compare-row .home-compare-me {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .home-compare-them {
        color: #8a8a8a;
    }

    .home-compare-row .home-compare-me {
        color: var(--color-dark);
        font-weight: 600;
    }

    /* dernière ligne : le prix, la conclusion du comparatif */
    .home-compare-total {
        padding-top: 1.1rem;
        border-bottom: none;
    }

    .home-compare-total .home-compare-them,
    .home-compare-total .home-compare-me {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.1;
    }

    .home-compare-total .home-compare-them {
        color: #9a9a9a;
        font-weight: 600;
    }

    .home-compare-total .home-compare-me {
        color: var(--color-orange);
    }

    .home-compare-total small {
        color: var(--color-muted-dark);
        font-size: 0.75rem;
        font-weight: 400;
    }
}


/* ─────────── pages/a-propos.css ─────────── */

/* ============================================================
   PAGE À PROPOS (site/templates/apropos.php)
   D'après la maquette about-page : en-tête sur fond dégradé,
   constat (carte orange + cartes grises), initiative (liste sur
   fond gris), engagements, ancrage local, appel à l'action.
   ============================================================ */

.ap {
    --ap-width: min(90%, 72rem);
    --ap-radius: 10px;
    --ap-border: 0.08rem solid #e4e4e4;
    overflow-x: clip;
}

/* titre de section centré + texte gris dessous */
.ap-head,
.ap-center-title {
    text-align: center;
}

.ap-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.ap-head p {
    max-width: 30rem;
    color: var(--color-muted-dark);
    line-height: 1.5;
}

/* ── 1. En-tête ── */

.ap-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--header-height));   /* tout l'écran sous le menu */
    padding-block: 3rem 6rem;
}

/* petite flèche en bas de l'écran : il y a une suite */
.ap-hero-next {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--color-white);
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
    translate: -50% 0;
    animation: ap-next 2s ease-in-out infinite;
}

@keyframes ap-next {
    0%, 100% { translate: -50% 0; }
    50%      { translate: -50% 0.4rem; }
}

/* clic sur la flèche : la page descend en douceur */
@media (prefers-reduced-motion: no-preference) {
    html:has(.ap) {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ap-hero-next {
        animation: none;
    }
}

.ap-rent {
    scroll-margin-top: calc(var(--header-height) + 2rem);
}

.ap-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    pointer-events: none;
}

.ap-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: var(--ap-width);
    margin-inline: auto;
    padding-left: clamp(0rem, 4vw, 3rem);
}

.ap-title {
    max-width: 44rem;
    font-size: clamp(2.125rem, 1.6rem + 1.6vw, 2.875rem);
    line-height: 1.05;
}

.ap-hero-intro {
    max-width: 36rem;
    color: var(--color-muted-dark);
    font-size: var(--fs-light);
    line-height: 1.45;
}

/* ── 2. Le constat ── */

.ap-rent {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: var(--ap-width);
    margin: clamp(5rem, 12vw, 9rem) auto 0;
}

.ap-rent-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

/* témoignage */
.ap-quote {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 2rem;
    border-radius: var(--ap-radius);
    background-color: var(--color-orange);
    color: var(--color-white);
}

/* <picture> devient une vraie boîte : sinon ses <source> comptent dans la mise en page */
.ap-quote .picture {
    display: block;
    flex-shrink: 0;
}

.ap-quote-photo {
    display: block;
    flex-shrink: 0;
    width: 7.5rem;
    height: 7.5rem;
    border: 0.08rem solid var(--color-white);
    border-radius: var(--ap-radius);
    object-fit: cover;
}

.ap-quote blockquote {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-block: 1.75rem;
}

/* guillemets : ouvrant en haut à gauche, fermant en bas à droite */
.ap-quote blockquote::before,
.ap-quote blockquote::after {
    position: absolute;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
}

.ap-quote blockquote::before {
    content: "“";
    top: -0.6rem;
    left: -2rem;
}

.ap-quote blockquote::after {
    content: "”";
    right: 0;
    bottom: -2.4rem;
}

.ap-quote p {
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* les 3 faits */
.ap-facts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ap-fact {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    border: var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--color-grey);
}

.ap-fact h3 {
    font-size: var(--fs-h3);
    font-weight: 500;
}

.ap-fact p {
    max-width: 26rem;
    padding-left: 1.9rem;
    color: var(--color-muted-dark);
    font-size: var(--fs-small);
    line-height: 1.5;
}

/* ── 3. Mon initiative ── */

.ap-initiative {
    margin-top: clamp(5rem, 10vw, 7rem);
    padding-block: clamp(4rem, 8vw, 6rem);
    background-color: var(--color-alt-grey);
}

.ap-initiative-inner {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    width: var(--ap-width);
    margin-inline: auto;
}

.ap-initiative-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 39rem;
}

.ap-initiative-head p {
    color: var(--color-muted-dark);
    line-height: 1.5;
}

.ap-answers {
    border-bottom: 0.06rem solid var(--color-dark);
}

.ap-answer {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    align-items: center;
    padding-block: 1.75rem;
    border-top: 0.06rem solid var(--color-dark);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.ap-answer-number {
    color: var(--color-orange);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    transition: color var(--transition-base);
}

.ap-answer h3 {
    font-size: var(--fs-h3);
    font-weight: 500;
}

.ap-answer p {
    max-width: 42rem;
    margin-top: 0.5rem;
    padding-left: 1rem;
    color: var(--color-muted-dark);
    line-height: 1.5;
    transition: color var(--transition-base);
}

/* la 2e réponse est mise en avant : bande orange fixe */
.ap-answer:nth-child(2) {
    background-color: var(--color-orange);
    color: var(--color-white);
}

.ap-answer:nth-child(2) .ap-answer-number,
.ap-answer:nth-child(2) p {
    color: var(--color-white);
}

/* ── 4. Engagements ── */

.ap-values {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    width: min(90%, 66rem);
    margin: clamp(5rem, 10vw, 8rem) auto 0;
}

.ap-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    width: 100%;
}

.ap-value {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 17.5rem;
    padding: 1.75rem 1.4rem;
    border: var(--ap-border);
    border-radius: 1.25rem;
    background-color: var(--color-grey);
    box-shadow: -2px 3px 10px 5px rgba(0, 0, 0, 0.05);
}

.ap-value img {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.5rem;
}

.ap-value h3 {
    font-size: var(--fs-h4);
    font-weight: 600;
}

.ap-value .p-small {
    color: var(--color-muted-dark);
    font-size: var(--fs-light);
    line-height: 1.5;
}

/* ── 5. Basé à Saint-Quentin ── */

.ap-local {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: min(90%, 50rem);
    margin: clamp(5rem, 10vw, 9rem) auto 0;
    text-align: center;
}

.ap-local-text {
    color: var(--color-muted-dark);
    line-height: 1.6;
}

.ap-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 0.5rem;
    max-width: 48rem;
    margin-top: 1rem;
}

.ap-pill {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 999rem;
    background-color: var(--color-white);
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
}

/* ── 6. Appel à l'action ── */

.ap-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-top: clamp(5rem, 10vw, 8rem);
    padding: 9rem 1.5rem 8rem;
    background: radial-gradient(ellipse 60% 45% at 50% 62%, rgba(255, 129, 77, 0.14), transparent 75%);
    text-align: center;
}

.ap-cta-title {
    font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
    font-weight: 600;
}

.ap-cta-text {
    max-width: 34rem;
    line-height: 1.5;
}

.ap-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.ap-btn-outline {
    border: 0.08rem solid var(--color-orange);
    border-radius: 999em;
    background-color: var(--color-white);
    color: var(--color-dark);
    transition: color var(--transition-base), translate 0.4s ease;
}

@media (hover: hover) {
    .ap-btn-outline:hover {
        color: var(--color-orange);
        translate: 0 -2px;
    }
}

/* ── Tablette ── */

@media (max-width: 1023px) {
    .ap-rent-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ap-value {
        min-height: 0;
    }
}

/* ── Apparition au défilement (assets/js/a-propos.js) ──
   Les blocs [data-reveal] montent en fondu quand ils arrivent à l'écran.
   Sans JavaScript, ou avec les animations réduites, tout reste visible. */

@keyframes ap-in {
    from {
        opacity: 0;
        translate: 0 1.25rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* l'en-tête arrive au chargement */
.ap-title,
.ap-hero-intro {
    animation: ap-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.ap-hero-intro {
    animation-delay: 0.12s;
}

.ap-reveal [data-reveal] {
    opacity: 0;
    translate: 0 1.5rem;
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.ap-reveal [data-reveal].is-visible {
    opacity: 1;
    translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .ap-title,
    .ap-hero-intro {
        animation: none;
    }
}

/* ── Mobile : pensé pour le pouce ──
   cartes qui défilent au doigt (le bord de la suivante dépasse),
   témoignage compact, pastilles en liste, boutons pleine largeur. */

/* nom sous la photo du témoignage : sur mobile uniquement */
.ap-quote-author {
    display: none;
}

@media (max-width: 767px) {
    /* en-tête : le texte descend vers la flèche, comme un écran d'accueil */
    .ap-hero {
        align-items: flex-end;
        padding-bottom: 7rem;
    }

    .ap-hero-next {
        bottom: 1.5rem;
    }

    .ap-rent {
        gap: 2rem;
    }

    .ap-head {
        align-items: flex-start;
        text-align: left;
    }

    /* témoignage : photo et nom sur une ligne, citation en dessous */
    .ap-quote {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 1.25rem 1rem;
        padding: 1.5rem 1.25rem 2rem;
    }

    .ap-quote-photo {
        width: 3.5rem;
        height: 3.5rem;
    }

    .ap-quote-author {
        display: flex;
        flex-direction: column;
        font-size: var(--fs-light);
        font-weight: 600;
        line-height: 1.3;
    }

    .ap-quote-author span {
        font-weight: 500;
        opacity: 0.85;
    }

    .ap-quote blockquote {
        grid-column: 1 / -1;
        padding: 1.75rem 0 0;
    }

    .ap-quote blockquote::before {
        top: -0.4rem;
        left: 0;
        font-size: 3rem;
    }

    .ap-quote blockquote::after {
        display: none;
    }

    .ap-quote p {
        font-size: 1rem;
    }

    /* les 3 faits et les 4 engagements défilent au doigt */
    .ap-facts,
    .ap-values-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        grid-template-columns: none;
        gap: 0.75rem;
        width: auto;
        margin-inline: -5vw;
        padding: 0.5rem 5vw 1rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 5vw;
        scrollbar-width: none;
    }

    .ap-facts::-webkit-scrollbar,
    .ap-values-grid::-webkit-scrollbar {
        display: none;
    }

    .ap-fact,
    .ap-value {
        scroll-snap-align: start;
    }

    .ap-fact {
        justify-content: flex-start;
        padding: 1.5rem 1.25rem;
    }

    .ap-fact p {
        padding-left: 0;
        font-size: var(--fs-light);
    }

    .ap-values {
        align-items: stretch;
        gap: 1.5rem;
    }

    .ap-values .ap-center-title {
        text-align: left;
    }

    .ap-value {
        min-height: 0;
        box-shadow: none;
    }

    /* initiative : grands chiffres, la bande orange déborde jusqu'aux bords */
    .ap-initiative-inner {
        gap: 2.5rem;
    }

    .ap-answer {
        grid-template-columns: 3rem minmax(0, 1fr);
        align-items: start;
        padding-block: 1.75rem;
    }

    .ap-answer-number {
        font-size: 2.5rem;
        text-align: left;
    }

    .ap-answer:nth-child(2) {
        margin-inline: -5.5vw;
        padding-inline: 5.5vw;
    }

    .ap-answer p {
        padding-left: 0;
    }

    /* ancrage local : pastilles en liste, alignées à gauche */
    .ap-local {
        align-items: flex-start;
        text-align: left;
    }

    .ap-local .ap-center-title {
        text-align: left;
    }

    .ap-pills {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: 0.5rem;
    }

    .ap-pill {
        gap: 0.75rem;
        padding: 0.85rem 1rem;
        border-radius: 0.875rem;
        font-size: var(--fs-light);
    }

    /* appel à l'action : boutons pleine largeur, le principal en premier */
    .ap-cta {
        padding: 5rem 5vw 4rem;
    }

    .ap-cta-actions {
        flex-direction: column-reverse;
        align-self: stretch;
        gap: 0.75rem;
        margin-top: 1.25rem;
    }

    .ap-cta-actions .btn {
        justify-content: center;
        width: 100%;
        padding-block: 1em;
    }
}


/* ─────────── pages/conseils-list.css ─────────── */

/* ============================================================
   PAGE CONSEILS (site/templates/conseils.php)
   En-tête centré (comme la liste des modèles), article à la une,
   puis grille de tous les articles.
   La ligne catégorie · date · lecture (.article-meta) et la carte
   article sont dans css/components/post-card.css.
   ============================================================ */

.bl-inner {
    width: min(90%, 66rem);
    margin-inline: auto;
}

/* sans bande grise (aucun autre article), on garde de l'air avant le pied de page */
.bl > .bl-inner:last-child {
    padding-bottom: 7rem;
}

/* ── En-tête ── */

.bl-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding-block: 6rem 5rem;
    text-align: center;
}

.bl-hero h1 {
    max-width: 40rem;
    font-size: clamp(2rem, 1.5rem + 1.8vw, 2.85rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.bl-hero-subtitle {
    max-width: 32rem;
    color: var(--color-muted-dark);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* ── Sections (en-tête : css/components/section-head.css) ── */

/* Tous les articles : bande grise pleine largeur, la « suite » de la page */
.bl-all {
    --section-head-line: #dcdcdc;
    margin-top: clamp(4rem, 2.5rem + 4vw, 6.5rem);
    padding-block: clamp(3.5rem, 2rem + 4.5vw, 6.5rem);
    background-color: var(--color-grey);
}

/* ── À la une ── */

.bl-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 3.5rem;
}

.bl-featured-media {
    display: block;
    overflow: hidden;
    border-radius: 1rem;
    aspect-ratio: 16 / 10;
    background-color: var(--color-grey);
}

.bl-featured-media img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.bl-featured-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.bl-featured-title {
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.bl-featured-title a {
    transition: color 0.2s ease;
}

.bl-featured-intro {
    color: var(--color-muted-dark);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.bl-read {
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.bl-read img {
    width: 9px;
    height: auto;
}

@media (hover: hover) {
    .bl-featured:has(a:hover) .bl-featured-media img {
        transform: scale(1.03);
    }

    .bl-featured-title a:hover {
        color: var(--color-orange);
    }
}

.bl-featured-title a:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 3px;
}

/* ── Tous les articles ── */

.bl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem 1.5rem;
}

.bl-grid .post-card-media {
    aspect-ratio: 16 / 10;
}

.bl-grid .post-card {
    gap: 0.6rem;
}

.bl-grid .post-card-title {
    color: var(--color-dark);
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .bl-grid .post-card:hover .post-card-title {
        color: var(--color-orange);
    }
}

/* ── Tablette / mobile ── */

@media (max-width: 1023px) {
    .bl-featured {
        gap: 2.5rem;
    }

    .bl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .bl > .bl-inner:last-child {
        padding-bottom: 4rem;
    }

    .bl-hero {
        align-items: flex-start;
        padding-block: 3rem 3.5rem;
        text-align: left;
    }


    .bl-featured {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .bl-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }
}


/* ─────────── pages/conseils-page.css ─────────── */

/* ============================================================
   ARTICLE DE CONSEIL (site/templates/article.php)
   En-tête, puis contenu à gauche et sommaire à droite (fixe au
   défilement), puis « À lire aussi ». Texte : css/components/prose.css.
   ============================================================ */

.ar {
    width: min(90%, 60rem);
    margin-inline: auto;
    padding-block: 3rem 7rem;
}

/* ── En-tête : retour, infos, titre, chapeau ── */

.ar-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: 44rem;
    margin-bottom: 3rem;
}

/* même lien que « ← Tous les modèles » de la page produit */
.ar-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.ar-back .icon {
    rotate: 180deg;
}

.ar-title {
    font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.ar-intro {
    color: var(--color-muted-dark);
    font-size: 1.125rem;
    line-height: 1.55;
}

.ar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13rem;
    gap: 5rem;
    align-items: start;
}

.ar-cover {
    width: 100%;
    height: auto;
    margin-bottom: 2.5rem;
    border-radius: 0.75rem;
}

/* ── Colonne de droite : reste visible pendant la lecture ── */

.ar-aside {
    position: sticky;
    top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* emplacement de la publicité : n'apparaît qu'une fois rempli */
.ar-ad {
    aspect-ratio: 1;
    border-radius: 0.75rem;
    background-color: #d9d9d9;
}

.ar-ad:empty {
    display: none;
}

.ar-toc-title {
    margin-bottom: 0.75rem;
    color: var(--color-muted-dark);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* trait vertical : la partie en cours y est marquée en orange */
.ar-toc ol {
    border-left: 1px solid #e4e4e4;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.ar-toc a {
    display: block;
    margin-left: -1px;
    padding: 0.4rem 0 0.4rem 0.9rem;
    border-left: 2px solid transparent;
    color: var(--color-muted-dark);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.ar-toc a[aria-current] {
    border-left-color: var(--color-orange);
    color: var(--color-dark);
    font-weight: 500;
}

@media (hover: hover) {
    .ar-back:hover,
    .ar-toc a:hover {
        color: var(--color-orange);
    }
}

/* ── À lire aussi : bande grise pleine largeur, comme « Autres modèles
   disponibles » de la page produit (en-tête : css/components/section-head.css) ── */

.ar-related {
    --section-head-line: #dcdcdc;
    padding-block: clamp(3.5rem, 2rem + 4.5vw, 6.5rem);
    background-color: var(--color-grey);
}

.ar-related-inner {
    width: min(90%, 52rem);
    margin-inline: auto;
}

/* cartes plus petites que sur la liste : on propose, sans prendre la vedette */
.ar-related-grid {
    gap: 2rem 1.25rem;
}

.ar-related-grid .post-card-title {
    font-size: 0.875rem;
}

/* ── Bannière de fin d'article ── */

.cta-banner {
    position: relative;
    margin-top: 3.5rem;
    overflow: hidden;
    border-radius: 1.5rem;
}

.cta-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.cta-banner-btn {
    position: absolute;
    /* sous « Et si on faisait le vôtre ? », aligné sur le texte de l'image */
    left: 6.5%;
    bottom: 1.25rem;
    font-size: 0.875rem;
}

.cta-banner-btn img {
    width: 9px;
    height: auto;
}

/* ── Mobile ── */

@media (max-width: 1023px) {
    .ar-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    /* au-dessus du contenu : le sommaire, dans un encadré gris */
    .ar-aside {
        position: static;
        order: -1;
    }

    .ar-toc {
        padding: 1.25rem 1.25rem 1rem;
        border-radius: 0.75rem;
        background-color: var(--color-alt-grey);
    }

    .ar-toc ol {
        border-left-color: #dcdcdc;
    }

    .ar-ad {
        display: none;
    }

    /* 3 cartes : on garde 3 colonnes plutôt qu'une carte seule en dessous */
    .ar-related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ar {
        padding-block: 2rem 4rem;
    }

    .ar-back {
        margin-bottom: 0.75rem;
    }

    .ar-header {
        margin-bottom: 2rem;
    }

    .ar-intro {
        font-size: 1rem;
    }

    /* mobile : cartes en ligne, petite image à gauche, texte à droite */
    .ar-related-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .ar-related-grid .post-card {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 1rem;
        row-gap: 0.35rem;
        align-items: start;
    }

    .ar-related-grid .post-card-media {
        grid-row: 1 / 3;
    }

    .ar-related-grid .post-card-arrow {
        display: none;
    }

    .ar-related-grid .article-meta {
        margin-top: 0;
    }

    /* place réduite à côté de l'image : la catégorie seule, sur une ligne */
    .ar-related-grid .article-meta time {
        display: none;
    }

    .cta-banner-btn {
        left: 0.75rem;
        bottom: 0.75rem;
        padding: 0.5rem 0.8rem;
        font-size: 0.75rem;
    }
}


/* ─────────── pages/template-list.css ─────────── */

/* ============================================================
   PAGE LISTE DES MODÈLES (site/templates/modeles.php)
   Hero centré, colonne de filtres à gauche, grille à droite.
   Les cases à cocher utilisent .filter-checkbox (buttons.css).
   ============================================================ */

.pl-page {
    width: min(92%, 76rem);
    margin-inline: auto;
    padding-bottom: 8rem;
}

/* ── Hero ── */

.pl-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding-block: 8rem 9rem;
    text-align: center;
}

.pl-hero-heading {
    max-width: 40rem;
    font-family: 'Plus Jakarta Sans';
    font-size: clamp(2rem, 1.5rem + 1.8vw, 2.85rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

/* le h1 et le cadre se suivent comme un seul titre */
.pl-hero-heading h1 {
    display: inline;
    font: inherit;
    letter-spacing: inherit;
}

.pl-hero-heading h1::after {
    content: " ";
}

.pl-hero h1 {
    max-width: 40rem;
    font-size: clamp(2rem, 1.5rem + 1.8vw, 2.85rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

/* ── Mot qui défile dans le titre : un cadre léger avec une flèche,
   qui ouvre la liste des métiers (js/model-filters.js) ── */

.pl-roll {
    position: relative;
    display: inline-block;
}

.pl-roll-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0 0.3em 0.04em;
    border: 1px solid #e2e2e2;
    border-radius: 0.22em;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) {
    .pl-roll-btn:hover {
        border-color: #cfcfcf;
        background-color: #fafafa;
    }
}

.pl-roll-btn[aria-expanded="true"] {
    border-color: var(--color-orange);
}

.pl-roll-btn:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 3px;
}

/* fenêtre du mot : sa largeur suit le mot affiché (réglée en JS) */
.pl-roll-window {
    position: relative;
    display: inline-block;
    height: 1.12em;
    overflow: hidden;
    max-width: calc(100vw - 5.5rem);   /* jamais plus large que l'écran (mobile) */
    vertical-align: bottom;
    transition: width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.pl-roll-word {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-orange);
    white-space: nowrap;
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.45s ease;
}

/* le mot sortant monte et disparaît, le suivant arrive par le bas */
.pl-roll-word.is-entering { transform: translateY(100%); opacity: 0; }
.pl-roll-word.is-leaving  { transform: translateY(-100%); opacity: 0; }

.pl-roll-btn .icon-arrow-down {
    width: 0.32em;
    height: 0.22em;
    color: var(--color-muted-dark);
    transition: rotate 0.2s ease;
}

.pl-roll-btn[aria-expanded="true"] .icon-arrow-down {
    rotate: 180deg;
}

/* liste des métiers, sous le cadre */
.pl-roll-list {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    z-index: 20;
    min-width: 14rem;
    padding: 0.4rem;
    border: 1px solid #ececec;
    border-radius: 0.6rem;
    background-color: var(--color-white);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.3;
    text-align: left;
    translate: -50% 0;
}

.pl-roll-list[hidden] {
    display: none;
}

.pl-roll-list li {
    padding: 0.55rem 0.75rem;
    border-radius: 0.4rem;
    cursor: pointer;
}

.pl-roll-list li:hover,
.pl-roll-list li:focus {
    outline: none;
    background-color: #f4f4f4;
}

.pl-roll-list li[aria-selected="true"] {
    color: var(--color-orange);
}

@media (prefers-reduced-motion: reduce) {
    .pl-roll-window,
    .pl-roll-word {
        transition: none;
    }
}

.pl-hero-subtitle {
    max-width: 32rem;
    color: var(--color-muted-dark);
    font-size: 0.8125rem;
}

/* ── Filtres + résultats ── */

.pl-body {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    column-gap: 2.5rem;
    align-items: start;
}

/* trait vertical fin : sépare les filtres de la grille */
.pl-filters {
    align-self: stretch;
    padding-right: 1.5rem;
    border-right: 1px solid #ececec;
}

.pl-filters-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2rem;
}

.pl-filters-title {
    font-size: 1rem;
    font-weight: 600;
}

/* « 8 modèles » : une indication, pas un titre */
.pl-count {
    color: var(--color-muted-dark);
    font-size: 0.875rem;
}

/* "Tout effacer" : lien orange souligné */
.pl-clear {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-orange);
    font-size: 0.875rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

/* sans filtre actif, "Tout effacer" garde son apparence */
.pl-clear:disabled {
    cursor: default;
}

.pl-clear:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

.pl-filters-form {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

/* annule les réglages de démo de .filter-group et du <legend> global (buttons.css) */
.pl-group {
    width: auto;
    padding-left: 0;
    gap: 0.6rem;
    border: none;
}

.pl-group legend {
    margin-bottom: 0.9rem;
    padding: 0;
    color: var(--color-muted-dark);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* options : poids normal, un cran sous « Filtres » */
.pl-group .filter-checkbox {
    gap: 0.7rem;
    font-size: 0.9375rem;
    font-weight: 400;
}

/* le compteur s'aligne avec "Filtres" */
.pl-count {
    margin-bottom: 2rem;
}

.pl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
}

/* carte masquée par les filtres */
.pl-item[hidden] {
    display: none;
}

.pl-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-block: 2rem;
    color: var(--color-muted-dark);
}

.pl-empty[hidden] {
    display: none;
}

/* le bouton "Filtres" n'existe que sur mobile */
.pl-filters-toggle {
    display: none;
}

/* ── Tablette ── */

@media (max-width: 1023px) {
    .pl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Mobile : filtres repliés derrière un bouton ── */

@media (max-width: 767px) {

    .pl-page {
        padding-bottom: 5rem;
    }

    .pl-hero {
        padding-block: 4rem 3rem;
    }

    /* la liste s'aligne sur le bord droit du cadre : elle reste dans l'écran */
    .pl-roll-list {
        left: auto;
        right: 0;
        translate: none;
    }

    .pl-body {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
    }

    .pl-filters-toggle {
        display: inline-flex;
        justify-self: start;
        align-items: center;
        gap: 0.4rem;
        padding: 0.6rem 1.1rem;
        border: 0.08rem solid var(--color-dark);
        border-radius: 999rem;
        background: none;
        font-weight: 600;
        cursor: pointer;
    }

    .pl-filters-toggle-count:not(:empty) {
        display: inline-grid;
        place-items: center;
        min-width: 1.25rem;
        height: 1.25rem;
        padding-inline: 0.3rem;
        border-radius: 999rem;
        background-color: var(--color-orange);
        color: var(--color-white);
        font-size: 0.75rem;
    }

    /* filtres fermés par défaut ; ouverts par le bouton (model-filters.js) */
    .pl-filters {
        display: none;
        border-right: none;
        padding: 1.5rem;
        border-radius: 1rem;
        background-color: var(--color-grey);
    }

    .pl-filters.is-open {
        display: block;
    }

    .pl-filters-head {
        margin-bottom: 1.5rem;
    }

    .pl-filters-form {
        gap: 1.5rem;
    }

    .pl-count {
        margin-bottom: 1.25rem;
    }

    .pl-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


/* ─────────── pages/template-page.css ─────────── */

/* ============================================================
   PAGE PRODUIT D'UN MODÈLE (site/templates/modele.php)
   Aperçu à gauche (fond rayé), informations et choix à droite,
   bandeau fixe en bas, autres modèles.
   ============================================================ */

:root {
    --pp-header-height: var(--header-height);   /* hauteur de la nav du site */
    --pp-bar-height: 4.1rem;    /* hauteur du bandeau fixe */
    /* espace vertical de toutes les sections sous l'aperçu (haut et bas),
       pour un rythme régulier : 56 px sur mobile → 104 px sur grand écran */
    --pp-space: clamp(3.5rem, 2rem + 4.5vw, 6.5rem);
}

/* la première section sous l'aperçu laisse la place du bandeau fixe,
   qui recouvre le bas de l'écran à l'arrivée sur la page */
.pp + * {
    margin-top: var(--pp-bar-height, 4.1rem);
}

.pp {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(20rem, 1fr);
    /* au moins la hauteur de l'écran (entre la nav et le bandeau) ; si les
       choix de droite sont plus longs, c'est la page qui défile, jamais la
       colonne seule, et l'aperçu reste collé à l'écran (voir .pp-preview) */
    min-height: max(26rem, calc(100svh - var(--pp-header-height) - var(--pp-bar-height)));
}

/* sur cette page, la nav reste en haut : l'aperçu se cale juste dessous */
body:has(.pp) header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #e6e6e6;   /* sépare la nav blanche de la colonne blanche de droite */
    background-color: var(--color-white);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* nav sombre au-dessus de « Le modèle en détail » : voir nav.css (header.is-dark) */
body:has(.pp) header.is-dark {
    border-bottom-color: #2a2a2a;
    background-color: var(--dark-bg, #0e0e0e);   /* couleur de la zone survolée (nav.js) */
}
/* ── Aperçu ── */

.pp-preview {
    position: sticky;
    top: var(--pp-header-height);
    align-self: start;
    height: max(26rem, calc(100svh - var(--pp-header-height) - var(--pp-bar-height)));

    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 0;
    padding: 1.5rem 1.75rem 1.75rem;

    background-color: #f1f1f1;
    background-image: url(/assets/images/bg-product.jpg);
    background-image: image-set(
        url(/assets/images/bg-product.avif) type("image/avif"),
        url(/assets/images/bg-product.jpg) type("image/jpeg")
    );
    background-size: cover;
    background-position: center;
}

.pp-preview-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    padding-inline: 1.25rem;
}

/* intitulés des réglages : de simples étiquettes, pas des titres
   (annule aussi le <legend> global de buttons.css) */
.pp-choice legend,
.pp-choice-title {
    margin-bottom: 0.75rem;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

/* « Profession », en petit au début de la ligne des métiers */
.pp-label {
    align-self: center;
    margin-right: 0.25rem;
    color: var(--color-muted-dark);
    font-size: 0.75rem;
    font-weight: 500;
}

.pp-professions {
    min-width: 0;
}

.pp-professions-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.pp-professions-list a.btn {
    display: inline-flex;
}

/* le modèle affiché : même style que le bouton sélectionné */
.pp-professions .btn[aria-current="page"] {
    background-color: var(--color-bg-active-selection);
    border-bottom-color: var(--color-border-active-selection);
}

.pp-professions .btn:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

.pp-professions .btn {
    padding: 0.55rem 0.85rem;
    font-size: 0.75rem;
    border-radius: 0.15rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    cursor: pointer;
}

/* bascule ordinateur / mobile */
.pp-device {
    margin-left: auto;          /* reste à droite, même avec la ligne Version */
    display: flex;
    gap: 0.25rem;
    padding: 0.2rem;
    border-radius: 999rem;
    border: 0.08rem solid var(--color-alt-grey);
    background-color: var(--color-white);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
}

.pp-device button {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--color-muted-dark);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pp-device button[aria-pressed="true"] {
    background-color: var(--color-orange);
    color: var(--color-white);
    box-shadow: inset 0 2px 4px #FFAC4D;
}

.pp-device button:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

.icon-desktop {
    --icon: url(/assets/icons/desktop-icon.svg);
    width: 18px;
    height: 16px;
}

.icon-phone {
    --icon: url(/assets/icons/phone-icon.svg);
    width: 10px;
    height: 17px;
}

/* la zone d'aperçu prend toute la hauteur restante ; en flex, sa hauteur est
   connue, donc les captures peuvent s'y limiter (max-height: 100%) */
.pp-frame {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}

.pp-frame[hidden] {
    display: none;
}

/* captures (si la démo refuse l'iframe) : la capture tient dans la zone */
.pp-shot {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.pp-shot-mobile {
    display: none;
    border-radius: 1.25rem;
}

/* iframe navigable : affichée à la taille d'un vrai écran (1440 px ou 390 px),
   puis réduite pour tenir dans la zone (--scale calculé par product-page.js) */
.pp-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.pp-iframe {
    --scale: 0.5;

    position: absolute;
    top: 0;
    left: 0;
    border: none;
    background-color: var(--color-white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transform-origin: 0 0;
    transform: scale(var(--scale));
}

/* roue de chargement : pendant le chargement de la démo ou d'un nouveau thème
   (attribut data-loading posé par product-page.js) */
.pp-loader {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background-color: rgba(255, 255, 255, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.pp-loader::after {
    content: "";
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid rgba(255, 129, 77, 0.25);
    border-top-color: var(--color-orange);
    border-radius: 50%;
    animation: pp-spin 0.8s linear infinite;
}

.pp-frame[data-loading] .pp-loader {
    opacity: 1;
    visibility: visible;
}

@keyframes pp-spin {
    to { rotate: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-loader::after {
        animation-duration: 2.4s;
    }
}

.pp-preview[data-device="mobile"] .pp-iframe {
    border-radius: calc(1.5rem / var(--scale));   /* arrondi visible de 1.5rem malgré la réduction */
}

.pp-preview[data-device="mobile"] .pp-shot-desktop {
    display: none;
}

.pp-preview[data-device="mobile"] .pp-shot-mobile {
    display: block;
}

/* ── Informations ── */

.pp-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    padding: 1.5rem 2.5rem 1.5rem 2rem;
    background-color: var(--color-white);
}

.pp-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    margin-left: 1.25rem;       /* aligné sur les boutons de métier */
    font-size: 0.8125rem;
    font-weight: 500;
}

.pp-back .icon {
    rotate: 180deg;
}

@media (hover: hover) {
    .pp-back:hover {
        color: var(--color-orange);
    }
}

.pp-intro {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.5rem 0 1.5rem;
    border-bottom: 1px solid #ececec;
}

.pp-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.pp-title {
    font-size: 1.75rem;
    font-weight: 600;
}

/* prix aligné sur le nom du modèle (même taille, même ligne) */
.pp-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    text-align: right;
}

.pp-price-amount {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.21;          /* même hauteur de ligne que le h1 : alignés */
    white-space: nowrap;
}

/* simple appui du prix : petit et discret */
.pp-price-note {
    margin-top: 0.15rem;
    color: var(--color-muted-dark);
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}

.pp-description {
    max-width: 26rem;
    color: var(--color-muted-dark);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.pp-options {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1rem;
}

.pp-options[hidden] {
    display: none;
}

.pp-choice {
    border: none;
}

.pp-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 8.1rem));
    gap: 0.5rem;
}

/* tuile de choix (palette ou typographie) */
.pp-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    min-height: 2.9rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 0.3rem;
    background-color: #f1f1f1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
    .pp-tile:hover {
        border-color: var(--color-border-hover-selection);
        background-color: var(--color-bg-hover-selection);
    }
}

.pp-tile:has(input:checked),
.pp-tile[aria-current="page"] {
    border-color: var(--color-orange);
    background-color: var(--color-bg-active-selection);
}

.pp-tile:has(input:focus-visible),
a.pp-tile:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

.pp-swatches {
    display: flex;
    height: 1.6rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.pp-swatches span {
    flex: 1;
}

/* ── Tuile « Votre couleur » (couleur libre) ── */
.pp-tile-custom {
    position: relative;
}

/* tant qu'aucune couleur n'est choisie : un dégradé arc-en-ciel */
.pp-tile-custom:not(.has-color) .pp-swatches {
    background: linear-gradient(90deg, #e9524a, #f2c14e, #5ab56d, #3f8ce6, #9a5ad6);
}

.pp-tile-custom:not(.has-color) .pp-swatches span {
    background: none !important;
}

.pp-custom-label {
    color: var(--color-muted-dark);
    font-size: 0.625rem;
}

/* le sélecteur de couleur du navigateur couvre toute la tuile, invisible :
   un clic n'importe où sur la tuile l'ouvre */
.pp-custom-picker {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.pp-tile-custom:has(.pp-custom-picker:focus-visible) {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

.pp-custom-note {
    max-width: 17rem;
    margin-top: 0.6rem;
    color: var(--color-muted-dark);
    font-size: 0.6875rem;
    line-height: 1.45;
}

.pp-custom-note[hidden] {
    display: none;
}

.pp-tiles:has(.pp-tile-typo) {
    grid-template-columns: repeat(2, minmax(0, 11.5rem));
}

/* la typographie : le nom du modèle et son métier, dans les polices proposées */
.pp-tile-typo {
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
}

.pp-typo-title {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pp-typo-body {
    color: var(--color-dark);
    font-size: 0.75rem;
}

/* versions (Énergie / Douce) : mêmes tuiles que les couleurs, mais ce sont des liens */
.pp-versions {
    margin-top: 1rem;
}

.pp-versions + .pp-options {
    margin-top: 0.25rem;       /* + le gap de .pp-info = même écart qu'entre Couleurs et Typos */
}

.pp-version-name {
    font-size: 0.875rem;
    font-weight: 600;
}

.pp-version-info {
    color: var(--color-muted-dark);
    font-size: 0.625rem;
}

/* retour au thème d'origine : visible dès qu'un autre choix est fait */
.pp-reset {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-muted-dark);
    font: inherit;
    font-size: 0.8125rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.pp-reset[hidden] {
    display: none;
}

@media (hover: hover) {
    .pp-reset:hover {
        color: var(--color-orange);
    }
}

/* démo non affichable en iframe : les choix restent possibles */
.pp-note {
    max-width: 24rem;
    color: var(--color-muted-dark);
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* ── Bandeau fixe ──
   Toujours en bas de l'écran ; il glisse hors de l'écran quand le footer
   apparaît (classe is-hidden ajoutée par product-page.js) */

.pp-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    transition:
        transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
        background-color 0.3s ease,
        border-color 0.3s ease;
    border-top: 1px solid #e4e4e4;
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px);
}

.pp-bar.is-hidden {
    transform: translateY(100%);
}

.pp-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: min(92%, 74rem);
    min-height: 4rem;
    margin-inline: auto;
}

.pp-bar-product {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pp-bar-thumb {
    width: 3.5rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.15rem;
}

.pp-bar-name {
    font-size: 0.8125rem;
    font-weight: 600;
}

.pp-bar-price {
    color: var(--color-muted-dark);
    font-size: 0.6875rem;
}

.pp-bar-actions {
    display: flex;
    gap: 0.75rem;
}

.pp-bar-btn {
    padding: 0.55rem 0.9rem;
    font-size: 0.8125rem;
    cursor: pointer;
}

.pp-bar-btn.btn-square-orange {
    border: none;
    border-radius: 0.15rem;
}

.pp-bar-btn.btn-square-white {
    border-radius: 0.15rem;
    border-color: #cfcfcf;
}

.pp-bar-btn[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

/* au-dessus d'une zone sombre : bandeau sombre aussi (classe posée par
   js/nav.js), comme la nav */
.pp-bar.is-dark {
    border-top-color: #2a2a2a;
    background-color: var(--dark-bg, #0e0e0e);   /* couleur de la zone survolée (nav.js) */
    color: var(--color-white);
}

.pp-bar-name,
.pp-bar-price,
.pp-bar-btn.btn-square-white {
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.pp-bar.is-dark .pp-bar-price {
    color: #a8a8a8;
}

.pp-bar.is-dark .pp-bar-btn.btn-square-white {
    border-color: #5a5a5a;
    background-color: transparent;
    color: var(--color-white);
}

@media (hover: hover) {
    .pp-bar.is-dark .pp-bar-btn.btn-square-white:hover {
        border-color: var(--color-orange);
        color: var(--color-orange);
    }
}

/* ── Autres modèles ── */

/* métier sous le nom du modèle, dans le même H1 (« Faîtage » + « Site internet pour couvreur ») */
.pp-title-metier {
    display: block;
    margin-top: 0.3rem;
    color: var(--color-muted-dark);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
}

/* ── Titres des sections du bas (Ce qui est compris, Autres modèles) ── */
.pp-section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: 40rem;
    margin: 0 auto 3rem;
    text-align: center;
}

.pp-section-head h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
}

.pp-section-head p {
    color: var(--color-muted-dark);
    line-height: 1.5;
}

/* ── Le modèle en détail : texte et image en alternance, sur une bande
   sombre pleine largeur (« on entre dans le vif du sujet ») ── */
.pp-details {
    padding-block: var(--pp-space);
    background-color: #0e0e0e;
    color: var(--color-white);
}

.pp-details-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 7vw, 6.5rem);
    width: min(92%, 70rem);
    margin-inline: auto;
}

.pp-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
}

/* un bloc sur deux : l'image passe à gauche, et garde la colonne la plus large */
.pp-detail:nth-child(even) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.pp-detail:nth-child(even) .pp-detail-media {
    order: -1;
}

.pp-detail-text {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 30rem;
}

.pp-detail-title {
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: 1.2;
}

.pp-detail-body {
    color: #b9b9b9;
    line-height: 1.65;
}

.pp-detail-media img,
.pp-detail-placeholder {
    display: block;
    width: 100%;
    height: auto;              /* sinon l'attribut height="1200" de l'image l'étire en hauteur */
    aspect-ratio: 4 / 3;
    border-radius: 0.9rem;
    object-fit: cover;
}

/* incrustation de l'image dans la bande sombre, en 3 couches :
   - ::before : une lueur douce derrière, qui décolle l'image du fond ;
   - l'image : une ombre portée plus noire que le fond, en dessous ;
   - ::after : un liseré clair sur le pourtour, plus marqué en haut (lumière d'en haut) */
.pp-detail-media {
    position: relative;
    isolation: isolate;
}

.pp-detail-media::before {
    content: "";
    position: absolute;
    inset: 8% 6% -4%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.07), transparent);
    filter: blur(40px);
    pointer-events: none;
}

.pp-detail-media img {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.35),
        0 18px 36px -12px rgba(0, 0, 0, 0.75),
        0 50px 90px -30px rgba(0, 0, 0, 0.9);
}

.pp-detail-media:has(img)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.9rem;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    pointer-events: none;
}

/* en attendant l'image : un emplacement gris avec le format conseillé */
.pp-detail-placeholder {
    display: grid;
    place-items: center;
    border: 1px dashed #3a3a3a;
    background-color: #202020;
    color: #6e6e6e;
    font-size: 0.8125rem;
}

@media (max-width: 1023px) {
    .pp-detail,
    .pp-detail:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    /* empilé : l'image toujours au-dessus du texte */
    .pp-detail .pp-detail-media,
    .pp-detail:nth-child(even) .pp-detail-media {
        order: -1;
    }

    .pp-detail-text {
        max-width: none;
    }
}

/* ── Comment ça se passe : 3 étapes sur une ligne, sans cartes,
   sur un fond gris très léger qui prend toute la largeur ── */
.pp-process {
    --pp-process-bg: #f8f8f8;    /* plus léger que le gris des autres modèles (#f2f2f2) */

    padding-block: var(--pp-space);
    background-color: var(--pp-process-bg);
}

.pp-process-inner {
    width: min(92%, 64rem);
    margin-inline: auto;
}

.pp-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
}

/* la ligne qui relie les étapes, au niveau des numéros */
.pp-steps::before {
    content: "";
    position: absolute;
    top: 1.35rem;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #e2e2e2;
}

.pp-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* numéro posé sur la ligne : fond de la section pour « couper » le trait */
.pp-step-number {
    align-self: flex-start;
    margin-bottom: 0.75rem;
    padding-right: 0.75rem;
    background-color: var(--pp-process-bg);
    color: var(--color-orange);
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.pp-step-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.pp-step-text {
    max-width: 18rem;
    color: var(--color-muted-dark);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.pp-process-note {
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid #e6e6e6;
    color: var(--color-muted-dark);
    font-size: 0.9375rem;
    text-align: center;
}

/* ── Ce qui est compris : grille de cartes, la grande carte à droite ── */
.pp-included {
    width: min(92%, 74rem);
    margin-inline: auto;
    padding-block: var(--pp-space);
}

.pp-boxes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
    gap: 1rem;
}

.pp-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 1.5rem 1.65rem;
    border: 1px solid #ededed;
    border-radius: 0.9rem;
    background-color: #f7f7f7;
}

.pp-box-icon {
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--color-dark);
}

/* petites cartes : icône en haut, titre calé en bas */
.pp-box:not(.pp-box-wide) {
    justify-content: space-between;
    min-height: 9rem;
}

.pp-box-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.pp-box-text {
    color: var(--color-muted-dark);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* grande carte : la promesse « à vous », sur toute la hauteur, teinte orange */
.pp-box-wide {
    grid-column: 4;
    grid-row: 1 / span 2;
    border-color: var(--color-border-hover-selection);
    background-color: #fff6f1;
}

.pp-box-wide .pp-box-icon {
    color: var(--color-orange);
}

.pp-box-wide .pp-box-title {
    font-size: 1.15rem;
}

.pp-box-points {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-hover-selection);
    font-size: 0.875rem;
    line-height: 1.4;
}

.pp-box-points li,
.pp-box-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.pp-box-point-icon {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--color-orange);
}

/* ce qui reste à prévoir : en bas de la grande carte, plus discret */
.pp-box-note {
    margin-top: auto;
    padding-top: 1.5rem;
    color: var(--color-muted-dark);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.pp-box-note .pp-box-point-icon {
    color: var(--color-muted-dark);
}

@media (max-width: 1023px) {
    .pp-boxes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* la grande carte passe en bas, sur toute la largeur */
    .pp-box-wide {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

@media (max-width: 767px) {

    /* frise verticale : la ligne passe à gauche des numéros */
    .pp-steps {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding-left: 3.75rem;
    }

    .pp-steps::before {
        top: 0.5rem;
        bottom: 0.5rem;
        left: 1.35rem;
        right: auto;
        width: 1px;
        height: auto;
    }

    .pp-step-number {
        position: absolute;
        top: -0.2rem;
        left: -3.75rem;
        width: 2.7rem;
        margin: 0;
        padding: 0.1rem 0;
        font-size: 1.75rem;
        text-align: center;
    }



    .pp-section-head {
        margin-bottom: 2rem;
    }

    .pp-boxes {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* cartes plus compactes : icône à gauche, titre et texte à droite */
    .pp-box:not(.pp-box-wide) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0.3rem 0.9rem;
        min-height: 0;
        padding: 1.1rem 1.15rem;
    }

    .pp-box:not(.pp-box-wide) .pp-box-icon {
        grid-row: span 2;
        width: 1.5rem;
        height: 1.5rem;
        margin: 0;
    }
}

/* ── FAQ « Avant de vous lancer » : en clair sur la page produit
   (sombre sur l'accueil : mêmes variables, voir blocks.css) ── */
body:has(.pp) .faq {
    --block-text: var(--color-dark);
    --block-muted: var(--color-muted-dark);
    --block-line: #d6d6d6;
    --block-line-soft: #e8e8e8;

    padding-block: var(--pp-space);
    background-color: var(--color-white);
}

/* le lien « Toutes les questions » ne rajoute pas d'espace sous la section */
body:has(.pp) .faq-more {
    margin-bottom: 0;
}

/* deux sections blanches qui se suivent : pas d'espace en double,
   le trait en haut de la FAQ fait la séparation */
body:has(.pp) .pp-included + .faq {
    padding-top: 0;
}

@media (hover: hover) {
    body:has(.pp) .faq .block-plus:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
}

/* ── Autres modèles : fond gris clair sur toute la largeur, pour trancher ── */
.pp-others {
    /* le bandeau du bas est fixe : la section garde sa place sous lui */
    /* + la hauteur du bandeau fixe, qui recouvre le bas de la page */
    --section-head-line: #dcdcdc;     /* en-tête : css/components/section-head.css */
    padding-block: var(--pp-space) calc(var(--pp-space) + var(--pp-bar-height, 4.1rem));
    background-color: var(--color-grey);
}

.pp-others-inner {
    width: min(92%, 74rem);
    margin-inline: auto;
}

.pp-others-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

/* ── Tablette / mobile ── */

@media (max-width: 1023px) {
    /* sous 1024 px, la page défile normalement */
    .pp {
        /* minmax(0, …) : la colonne ne s'élargit pas pour la ligne des
           métiers, qui défile au doigt au lieu de pousser la page */
        grid-template-columns: minmax(0, 1fr);
    }

    /* l'aperçu redevient un bloc normal, la nav défile avec la page */
    .pp-preview {
        position: static;
        height: auto;
    }

    body:has(.pp) header {
        position: static;
    }

    /* zone d'aperçu de hauteur fixe pour l'iframe */
    .pp-frame {
        flex: none;
        height: 70svh;
    }

    /* avec des captures : la zone prend leur hauteur, la capture mobile est limitée */
    .pp-frame:not(:has(.pp-viewport)) {
        height: auto;
    }

    .pp-frame:not(:has(.pp-viewport)) .pp-shot-mobile {
        max-height: 70svh;
    }

    .pp-others-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .pp-preview {
        padding: 1.5rem 1rem 2rem;
    }

    .pp-preview-top {
        flex-direction: column;
        align-items: stretch;
        padding-inline: 0;
    }

    /* professions : une ligne qui défile au doigt */
    .pp-professions-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }

    .pp-professions-list li,
    .pp-label {
        flex-shrink: 0;
    }

    .pp-professions-list a.btn {
        white-space: nowrap;
    }

    .pp-title,
    .pp-price-amount {
        font-size: 1.5rem;
    }

    .pp-back {
        margin-left: 0;
    }

    .pp-device {
        align-self: flex-end;
    }

    /* aperçu ordinateur sur téléphone : la zone a la proportion d'un écran
       d'ordinateur (1440 × 900) au lieu de 70 % de la hauteur, sinon la démo
       réduite s'affiche en une longue bande qui casse la page */
    .pp-preview[data-device="desktop"] .pp-frame:has(.pp-viewport) {
        height: auto;
        aspect-ratio: 1440 / 900;
    }

    .pp-info {
        padding: 1.5rem 1.5rem 2.5rem;
    }


    .pp-tiles,
    .pp-tiles:has(.pp-tile-typo) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* bandeau : nom et prix au-dessus des deux boutons */
    .pp-bar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        padding-block: 0.75rem;
    }

    .pp-bar-thumb {
        display: none;
    }

    .pp-bar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .pp-bar-btn {
        justify-content: center;
        text-align: center;
    }


    .pp-others-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-bar {
        transition: none;
    }
}


/* ─────────── pages/contact.css ─────────── */

/* ============================================================
   PAGE CONTACT (site/templates/contact.php)
   À gauche : grand carré d'aperçus des modèles (défilé : js/contact.js),
   puis coordonnées. À droite : titre, accroche et formulaire.
   Champs : css/components/form.css ; bouton, mention et coche de
   confirmation : repris de la fenêtre de demande (request-dialog.css).
   ============================================================ */

.ct {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(3rem, 7vw, 7rem);
    width: min(100%, 90rem);
    margin-inline: auto;
    padding: clamp(2.5rem, 7svh, 4.5rem) 5vw clamp(4rem, 10svh, 6.5rem);
}

/* ── Colonne de gauche ── */

/* le carré reste entier dans l'écran sur les ordinateurs peu hauts */
.ct-side {
    width: min(100%, calc(100svh - var(--header-height) - 9rem));
    min-width: min(100%, 26rem);
}

.ct-showcase {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 1.25rem;
    background-color: #0e0e0e;
}

/* les aperçus se superposent et passent de l'un à l'autre en fondu */
.ct-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
}

.ct-slide.is-active {
    opacity: 1;
}

.ct-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1.04;
    transition: scale 6s ease-out;
}

/* léger zoom arrière pendant que l'aperçu est affiché */
.ct-slide.is-active .ct-slide-img {
    scale: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ct-slide,
    .ct-slide-img {
        transition: none;
    }
}

/* coordonnées : sous un trait fin, sur deux colonnes */
.ct-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #ececec;
}

.ct-facts dt {
    margin-bottom: 0.3rem;
    color: var(--color-muted-dark);
    font-size: var(--fs-small);
}

.ct-facts dd {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.ct-facts a {
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .ct-facts a:hover {
        color: var(--color-orange);
    }
}

.ct-nowrap {
    white-space: nowrap;
}

.ct-socials {
    display: flex;
    gap: 1.1rem;
    margin-top: 1.75rem;
    color: var(--color-muted-dark);
}

.ct-socials a {
    display: block;
    transition: color 0.2s ease;
}

.ct-socials svg {
    display: block;
}

@media (hover: hover) {
    .ct-socials a:hover {
        color: var(--color-orange);
    }
}

/* ── Colonne de droite ── */

.ct-main {
    min-width: 0;
    padding-top: clamp(0rem, 2svh, 1.5rem);
}

.ct-form-view {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    max-width: 34rem;
}

.ct-form-view[hidden] {
    display: none;
}

.ct-title {
    font-size: clamp(1.75rem, 1.45rem + 0.9vw, 2.375rem);
    line-height: 1.15;
}

.ct-intro {
    max-width: 30rem;
    margin-top: 0.75rem;
    color: var(--color-muted-dark);
    font-weight: 400;
    line-height: 1.55;
}

.ct-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ct-form .field {
    gap: 0.4rem;
}

.ct-form .field label {
    padding-left: 0;
    font-size: 0.8125rem;
    font-weight: 500;
}

.ct-form .field-input {
    padding-block: 0.7rem;
}

.ct-row {
    display: grid;
    /* minmax(0, …) : une longue suggestion d'e-mail déborde au lieu d'élargir la colonne */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* suggestion d'e-mail : sur sa propre ligne, sous l'erreur, sans se tasser
   dans la demi-colonne */
.ct-form .field-feedback {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.ct-form .field-suggest {
    padding-left: 0;
    border-left: none;
    white-space: nowrap;
}

.ct-field-message .field-input {
    min-height: 8.5rem;
    resize: vertical;
}

.ct-submit {
    margin-top: 0.25rem;
}

.ct-note {
    margin-top: -0.5rem;
    padding-left: 0;
    text-align: left;
}

/* ── Menu "Motif de contact" ── */

.ct-select {
    width: 100%;
    color: var(--color-dark);
    cursor: pointer;
}

/* tant qu'aucun motif n'est choisi, le texte est grisé */
.ct-select:has(option[value=""]:checked) {
    color: var(--color-muted-dark);
}

/* menu personnalisé (Chrome / Edge récents) : ailleurs, liste native */
@supports (appearance: base-select) {
    .ct-select,
    .ct-select::picker(select) {
        appearance: base-select;
    }

    .ct-select {
        display: flex;
        align-items: center;
        padding-inline: 0.9rem;
    }

    .ct-select::picker-icon {
        content: "";
        width: 0.7rem;
        height: 0.45rem;
        margin-left: auto;
        background-color: currentColor;
        mask: url(/assets/icons/arroxDown.svg) center / contain no-repeat;
        transition: rotate 0.2s ease;
    }

    .ct-select:open::picker-icon {
        rotate: 180deg;
    }

    /* la liste qui s'ouvre */
    .ct-select::picker(select) {
        margin-top: 0.3rem;
        padding: 0.35rem;
        border: 1px solid #ececec;
        border-radius: 0.9rem;
        background-color: var(--color-white);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }

    .ct-select option {
        padding: 0.55rem 1.4rem;
        border-radius: 0.4rem;
        font-size: 0.8125rem;
        cursor: pointer;
    }

    .ct-select option::checkmark {
        display: none;
    }

    .ct-select option:hover,
    .ct-select option:focus-visible {
        background-color: #f1f1f1;
        outline: none;
    }

    .ct-select option:checked {
        color: var(--color-orange);
    }

    /* "Sélectionner" n'est pas un vrai choix : masqué dans la liste */
    .ct-select option[value=""] {
        display: none;
    }
}

.ct-select:focus-visible {
    border-color: var(--color-orange);
}

/* ── Confirmation ── */

.ct-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: min(36rem, 70svh);
    text-align: center;
    font-size: 0.875rem;
}

.ct-success[hidden] {
    display: none;
}

.ct-success-box {
    margin-top: clamp(1.5rem, 8svh, 5rem);
    padding: 1rem 1.6rem;
    border-radius: 0.75rem;
    background-color: #f4f4f4;
}

/* ── Petits ordinateurs : coordonnées sur une colonne, la colonne est étroite ── */

@media (min-width: 1024px) and (max-width: 1199px) {
    .ct-facts {
        grid-template-columns: 1fr;
    }
}

/* ── Tablette : une seule colonne, le titre et le formulaire d'abord ── */

@media (max-width: 1023px) {
    .ct {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .ct-main {
        order: -1;
        padding-top: 0;
    }

    .ct-form-view {
        max-width: none;
    }

    .ct-side {
        width: min(100%, 36rem);
        min-width: 0;
    }
}

/* ── Mobile ── */

@media (max-width: 767px) {
    .ct {
        padding: 2.5rem 1.5rem 4rem;
    }

    .ct-row {
        grid-template-columns: 1fr;
    }

    .ct-form .field-input {
        font-size: 1rem;   /* évite le zoom automatique d'iOS */
    }

    .ct-facts {
        grid-template-columns: 1fr;
    }

    .ct-success {
        padding-block: 3rem;
    }
}


/* ─────────── pages/legal.css ─────────── */

/* ============================================================
   PAGES LÉGALES (site/templates/legal.php)
   Texte : css/components/prose.css ; sommaire : styles .ar-toc
   de la page article (conseils-page.css).
   ============================================================ */

.lg {
    width: min(90%, 58rem);
    margin-inline: auto;
    padding-block: 5rem 7rem;
}

.lg-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 40rem;
    margin-bottom: 3rem;
}

.lg-title {
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem);
    font-weight: 600;
    line-height: 1.15;
}

.lg-updated {
    color: var(--color-muted-dark2);
    font-size: 0.8125rem;
}

.lg-intro {
    color: var(--color-muted-dark);
    line-height: 1.55;
}

.lg-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14rem;
    gap: 4.5rem;
    align-items: start;
}

/* le premier titre n'a pas besoin de grande marge au-dessus */
.lg-content > h2:first-child {
    margin-top: 0;
}

/* repère visuel des passages à compléter dans le Panel */
.lg-content mark {
    padding: 0 0.2rem;
    border-radius: 0.2rem;
    background-color: var(--color-bg-active-selection);
    color: var(--color-orange);
    font-weight: 600;
}

.lg-aside {
    position: sticky;
    top: 2rem;
}

@media (max-width: 1023px) {
    .lg-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .lg-aside {
        position: static;
        order: -1;
    }
}

@media (max-width: 767px) {
    .lg {
        padding-block: 2.5rem 4rem;
    }
}


/* ─────────── pages/error.css ─────────── */

/* ============================================================
   PAGE 404 (site/templates/error.php)
   Même fond dégradé que la page À propos, grand « 404 » orange,
   boutons de l'accueil, puis trois raccourcis en cartes grises.
   ============================================================ */

.er {
    overflow-x: clip;
}

/* ── En-tête ── */

.er-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: clamp(5rem, 12vw, 8rem) 1.5rem 4rem;
    text-align: center;
}

.er-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    pointer-events: none;
}

/* le grand 404 : dégradé orange dans le texte */
.er-code {
    background: linear-gradient(180deg, #FEB47A 0%, var(--color-orange) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(6rem, 4rem + 9vw, 11rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.9;
}

.er-title {
    font-size: var(--fs-h1);
}

.er-intro {
    max-width: 30rem;
    color: var(--color-muted-dark);
    line-height: 1.5;
}

.er-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.er-btn-outline {
    border: 0.08rem solid var(--color-orange);
    border-radius: 999em;
    background-color: var(--color-white);
    color: var(--color-dark);
    transition: color var(--transition-base), translate 0.4s ease;
}

@media (hover: hover) {
    .er-btn-outline:hover {
        color: var(--color-orange);
        translate: 0 -2px;
    }
}

/* ── Raccourcis ── */

.er-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    width: min(90%, 60rem);
    margin: 1rem auto 8rem;
}

.er-shortcut {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 1.4rem;
    border: 0.08rem solid #e4e4e4;
    border-radius: 1.25rem;
    background-color: var(--color-grey);
    transition: border-color var(--transition-base), translate 0.4s ease;
}

.er-shortcut-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

.er-shortcut-text {
    color: var(--color-muted-dark);
    font-size: var(--fs-light);
    line-height: 1.5;
}

@media (hover: hover) {
    .er-shortcut:hover {
        border-color: var(--color-orange);
        translate: 0 -3px;
    }

    .er-shortcut:hover .er-shortcut-title {
        color: var(--color-orange);
    }
}

/* ── Mobile ── */

@media (max-width: 767px) {
    .er-hero {
        padding-bottom: 2.5rem;
    }

    .er-actions {
        flex-direction: column;
        align-self: stretch;
        gap: 0.75rem;
    }

    .er-actions .btn {
        justify-content: center;
        width: 100%;
        padding-block: 1em;
    }

    .er-shortcuts {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
        margin-bottom: 5rem;
    }
}