/*
 * Orbistix — feuille de style principale.
 *
 * Direction : le langage visuel d'allsolutions.fr, le site de reference retenu
 * par la cliente. Les quatre marqueurs a tenir, dans l'ordre ou ils sautent
 * aux yeux sur la reference :
 *
 *   1. des bandes photo pleine largeur, bord a bord, sans cadre ni arrondi ;
 *   2. un bloc de contenu qui remonte par-dessus la photo (.panneau) ;
 *   3. de gros boutons en pastille, ardoise ou rouge, jamais discrets ;
 *   4. des titres bicolores — debut en rouge et en gras, suite en gris et en
 *      maigre, point rouge pour fermer.
 *
 * Fonds clairs uniquement, blanc et gris pale #f2f2f2 en alternance ; le seul
 * fond sombre est une photo voilee. Angles a 25 px, comme la reference.
 *
 * Les couleurs sont celles de la reference (rouge + ardoise) : la charte
 * definitive d'Orbistix n'est pas arretee, tout est regroupe dans les
 * variables ci-dessous pour qu'un changement de teinte tienne en trois lignes.
 *
 * Deux polices, deux roles : Titillium Web pour les titres et le texte,
 * Fira Sans Condensed pour toutes les capitales. Voir polices.css.
 *
 * Organisation : variables, socle, mise en page, puis composants dans l'ordre
 * ou on les rencontre en descendant une page.
 */

/* ========================================================================== */
/*  Variables                                                                 */
/* ========================================================================== */

:root {
    /* Accent. Porte la premiere moitie des titres, les points, les boutons
       principaux. #e41625 sur blanc : 4,7:1, il passe aussi en petit texte. */
    --rouge: #e41625;
    --rouge-fonce: #b90f1b;
    --rouge-pale: #fdeced;
    /* Le rouge de marque tombe a 4,2:1 sur le gris pale : sous 18,7 px il faut
       cette variante, qui tient 5,1:1 sur les deux fonds. */
    --rouge-texte: #cc101f;

    /* Ardoise : le texte, les boutons secondaires, le pied de page. */
    --ardoise: #2f3b48;
    --ardoise-fonce: #232d38;
    --ardoise-clair: #5a6672;

    /* Gris, du plus clair au plus fonce. Les seuils vises sont ceux du RGAA :
       4,5:1 pour du texte courant, 3:1 pour du grand texte et pour le contour
       d'un composant de formulaire.

         --gris-titre  3,7:1 sur blanc, 3,3:1 sur gris pale — la seconde
                       moitie des titres, et rien d'autre : reserve au grand
                       texte, il echouerait sur un paragraphe
         --gris        5,2:1 sur blanc, 4,6:1 sur gris pale — surtitres,
                       libelles, mentions, indications de saisie
         --gris-texte  6,0:1 — le texte courant */
    --gris-titre: #7f868d;
    --gris: #666e74;
    --gris-texte: #5c646c;

    --blanc: #ffffff;
    --pale: #f2f2f2;

    /* Deux filets : le clair pour les separations decoratives, le fonce pour
       le contour des champs de formulaire — c'est lui qui signale ou l'on
       peut saisir, il doit atteindre 3:1. */
    --ligne: #e2e2e2;
    --ligne-champ: #7d858c;
    --ligne-claire: rgba(255, 255, 255, 0.16);

    --alerte: #b3161f;
    --alerte-fond: #fdecee;
    --succes: #1d6b4a;
    --succes-fond: #eef7f2;

    --police-texte: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --police-capitale: 'Fira Sans Condensed', 'Titillium Web', 'Helvetica Neue', Arial, sans-serif;

    /* Echelle fluide : une seule valeur par role, elle s'adapte a la largeur. */
    --t-h1: clamp(2.4rem, 1.55rem + 3.4vw, 3.6rem);
    --t-h2: clamp(1.9rem, 1.45rem + 1.9vw, 2.7rem);
    --t-h3: clamp(1.35rem, 1.18rem + 0.65vw, 1.7rem);
    --t-lead: clamp(1.08rem, 1.02rem + 0.32vw, 1.28rem);
    --t-corps: 1.0625rem;
    --t-petit: 0.9375rem;
    --t-micro: 0.8125rem;

    --largeur: 1240px;
    --marge: clamp(1.25rem, 4vw, 3rem);
    --section: clamp(4rem, 7vw, 7rem);
    --entete-h: 5.25rem;

    --rayon: 25px;
    --rayon-petit: 12px;
    --rayon-pastille: 999px;

    --ombre: 0 1px 2px rgba(47, 59, 72, 0.04), 0 8px 24px rgba(47, 59, 72, 0.07);
    --ombre-forte: 0 4px 10px rgba(47, 59, 72, 0.07), 0 24px 60px rgba(47, 59, 72, 0.14);

    --transition: 180ms cubic-bezier(0.33, 0.1, 0.25, 1);
}

/* ========================================================================== */
/*  Socle                                                                     */
/* ========================================================================== */

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

html {
    scroll-behavior: smooth;
    /* Une ancre ne doit pas se retrouver cachee sous l'en-tete collant. */
    scroll-padding-top: calc(var(--entete-h) + 1.5rem);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--blanc);
    color: var(--gris-texte);
    font-family: var(--police-texte);
    font-size: var(--t-corps);
    line-height: 1.7;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    margin: 0;
    color: var(--ardoise);
    font-weight: 700;
    line-height: 1.15;
}

p {
    margin: 0 0 1.1em;
}

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

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

figure,
blockquote {
    margin: 0;
}

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

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

strong {
    font-weight: 600;
}

::selection {
    background: var(--rouge);
    color: var(--blanc);
}

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

.pied :focus-visible,
.tiroir :focus-visible {
    outline-color: var(--blanc);
}

/* Complement reserve aux lecteurs d'ecran : leve l'ambiguite d'un libelle
   comme « En savoir plus », que le RGAA 6.1 demande explicite hors contexte,
   sans allonger le bouton a l'ecran. */
.lecteur-seul {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Lien d'evitement : invisible tant qu'il n'a pas le focus clavier. */
.saut {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 200;
    padding: 0.7rem 1.2rem;
    border-radius: var(--rayon-pastille);
    background: var(--ardoise);
    color: var(--blanc);
    font-family: var(--police-capitale);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transform: translateY(-180%);
    transition: transform var(--transition);
}

.saut:focus-visible {
    transform: translateY(0);
}

/* ========================================================================== */
/*  Mise en page                                                              */
/* ========================================================================== */

.zone {
    width: 100%;
    max-width: calc(var(--largeur) + var(--marge) * 2);
    margin-inline: auto;
    padding-inline: var(--marge);
}

.zone--etroite {
    max-width: calc(46rem + var(--marge) * 2);
}

.section {
    padding-block: var(--section);
}

.section--pale {
    background: var(--pale);
}

.texte-centre {
    text-align: center;
}

/* Deux colonnes. Le contenu passe l'un sous l'autre bien avant que les
   colonnes ne deviennent illisibles. */
.duo {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 62em) {
    .duo--media {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .duo--ample {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: start;
    }
}

/* Apparition au defilement. Sans JavaScript la classe .js n'est jamais posee,
   donc rien n'est masque : le contenu reste visible en toutes circonstances. */
.js [data-anime] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js [data-anime].est-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js [data-anime] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ========================================================================== */
/*  Typographie                                                               */
/* ========================================================================== */

/* Le titre bicolore, signature du site de reference. Le gras rouge ouvre,
   le maigre gris continue, le point rouge ferme. */
.titre {
    margin: 0;
    color: var(--gris-titre);
    font-weight: 300;
    font-size: var(--t-h2);
    line-height: 1.14;
    letter-spacing: -0.005em;
    text-wrap: balance;
}

.titre strong {
    color: var(--rouge);
    font-weight: 700;
}

.titre .point {
    color: var(--rouge);
    font-weight: 700;
}

h1.titre {
    font-size: var(--t-h1);
}

.surtitre {
    margin: 0 0 0.9rem;
    color: var(--gris);
    font-family: var(--police-capitale);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sous-titre {
    margin: 0 0 1.5rem;
    font-size: var(--t-h3);
    font-weight: 600;
}

.lead {
    margin: 1.15rem 0 0;
    color: var(--gris-texte);
    font-size: var(--t-lead);
    font-weight: 300;
    line-height: 1.6;
    text-wrap: pretty;
}

.lecture {
    max-width: 42rem;
}

.texte-centre .lecture {
    margin-inline: auto;
}

/* Phrase de conclusion : plus grave que le corps, sans devenir un titre. */
.mention {
    margin: 0;
    color: var(--ardoise);
    font-size: var(--t-lead);
    font-weight: 600;
    line-height: 1.5;
}

.mention::before {
    content: '';
    display: block;
    width: 46px;
    height: 4px;
    margin-bottom: 1.1rem;
    border-radius: 2px;
    background: var(--rouge);
}

.texte-centre .mention::before {
    margin-inline: auto;
}

/* ========================================================================== */
/*  Boutons et liens                                                          */
/* ========================================================================== */

/* Gros boutons en pastille, comme sur la reference : ce sont eux qui donnent
   le ton, pas des liens discrets. */
.bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.05rem 2.2rem;
    border: 2px solid transparent;
    border-radius: var(--rayon-pastille);
    background: var(--rouge);
    color: var(--blanc);
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition);
}

.bouton:hover {
    background: var(--rouge-fonce);
    transform: translateY(-2px);
}

.bouton__icone {
    width: 18px;
    height: 18px;
    flex: none;
    transition: transform var(--transition);
}

.bouton:hover .bouton__icone {
    transform: translateX(3px);
}

/* Secondaire : le gris ardoise de la reference. */
.bouton--ardoise {
    background: var(--ardoise-clair);
    color: var(--blanc);
}

.bouton--ardoise:hover {
    background: var(--ardoise);
}

.bouton--petit {
    padding: 0.72rem 1.35rem;
    font-size: var(--t-petit);
}

.boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2.25rem;
}

.boutons--centre {
    justify-content: center;
}

/* ========================================================================== */
/*  En-tete                                                                   */
/* ========================================================================== */

.entete {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--blanc);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.entete.est-detachee {
    border-bottom-color: var(--ligne);
    box-shadow: 0 6px 24px rgba(47, 59, 72, 0.07);
}

.entete__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--entete-h);
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-right: auto;
    text-decoration: none;
}

.marque__signe {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: var(--rayon-petit);
    background: var(--rouge);
    color: var(--blanc);
}

.marque__signe svg {
    width: 26px;
    height: 26px;
}

.marque__texte {
    display: flex;
    flex-direction: column;
}

.marque__nom {
    color: var(--ardoise);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.marque__ligne {
    color: var(--gris);
    font-family: var(--police-capitale);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav {
    display: none;
    gap: 1.5rem;
}

.nav__lien {
    position: relative;
    padding-block: 0.35rem;
    color: var(--ardoise);
    font-family: var(--police-capitale);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition);
}

.nav__lien:hover,
.nav__lien[aria-current='page'] {
    color: var(--rouge);
}

.nav__lien::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--rouge);
    transform: scaleX(0);
    transition: transform var(--transition);
}

.nav__lien:hover::after,
.nav__lien[aria-current='page']::after {
    transform: scaleX(1);
}

.nav__lien[aria-current='page'] {
    font-weight: 600;
}

.entete__action {
    display: none;
}

.burger {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.62rem 1rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-pastille);
    background: var(--blanc);
    color: var(--ardoise);
    font-family: var(--police-capitale);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.burger__traits {
    display: grid;
    gap: 3.5px;
    width: 17px;
}

.burger__traits span {
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.burger__traits--croix span:nth-child(2) {
    opacity: 0;
}

.burger__traits--croix span:first-child {
    transform: translateY(5.5px) rotate(45deg);
}

.burger__traits--croix span:last-child {
    transform: translateY(-5.5px) rotate(-45deg);
}

/* Le seuil depend de la largeur des six libelles en Fira Condensed : la barre
   complete tient a partir de 1248 px. Un libelle plus long imposerait de
   remesurer — et de reporter la nouvelle valeur dans app.js.

   La regle vient apres les declarations de base : a specificite egale, c'est
   l'ordre du fichier qui tranche. */
@media (min-width: 78em) {
    .nav,
    .entete__action {
        display: flex;
    }

    .burger {
        display: none;
    }
}

/* ------------------------------------------------------------------ tiroir */

.tiroir {
    position: fixed;
    inset: 0;
    z-index: 150;
    overflow-y: auto;
    padding-bottom: 3rem;
    background: var(--blanc);
}

.tiroir[hidden] {
    display: none;
}

.tiroir__haut {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--entete-h);
    border-bottom: 1px solid var(--ligne);
}

.tiroir__nav {
    display: grid;
    margin-top: 1.5rem;
}

.tiroir__lien {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--ligne);
    color: var(--ardoise);
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
}

.tiroir__lien[aria-current='page'] {
    color: var(--rouge);
}

.tiroir__lien-note {
    display: block;
    color: var(--gris);
    font-family: var(--police-capitale);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.tiroir__chevron {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--rouge);
}

.tiroir__pied {
    margin-top: 2.25rem;
}

.tiroir__coord {
    display: grid;
    gap: 0.4rem;
    margin-top: 1.5rem;
    color: var(--gris-texte);
    font-size: var(--t-petit);
}

/* ========================================================================== */
/*  Bandes photo pleine largeur                                               */
/* ========================================================================== */

/* Le marqueur le plus visible de la reference : une photo bord a bord, sans
   cadre ni arrondi, qui coupe la page. Deux emplois, donc deux composants.

   .bande-photo : une respiration entre deux sections, ou le fond d'un bloc
   qui remonte par-dessus (.panneau). Sa hauteur lui appartient. */
.bande-photo {
    height: clamp(13rem, 24vw, 21rem);
    overflow: hidden;
}

/* Le <picture> n'est qu'un conteneur inline : sans hauteur explicite, le
   height:100% de l'image se resout en auto et la photo, un portrait, coule
   sur toute la page. */
.bande-photo picture {
    display: block;
    height: 100%;
}

.bande-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Quatre photos pour six pages : faire varier le cadrage d'une page a
       l'autre est ce qui evite l'impression de rabachage. */
    object-position: center var(--cadrage, 55%);
}

.bande-photo--haute {
    height: clamp(21rem, 46vw, 38rem);
}

/*
 * Photo fixe. La bande devient une fenetre ouverte sur une image immobile :
 * a mesure qu'elle traverse l'ecran, elle en decouvre une portion differente.
 * C'est le geste de /transport-lot-partiel sur le site de reference.
 *
 * clip-path rogne l'image a la bande sans devenir son bloc conteneur : elle
 * reste donc calee sur la fenetre, et c'est tout l'effet. La reference, elle,
 * utilise background-attachment: fixed — ecarte ici pour deux raisons : iOS
 * l'ignore, et une image de fond ne peut pas etre servie en <picture>, donc
 * ni WebP de secours ni variante selon la largeur d'ecran.
 */
.bande-photo--fixe {
    clip-path: inset(0);
}

.bande-photo--fixe picture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

/* Le decalage entre l'image immobile et la page qui defile est exactement ce
   qu'un visiteur sensible au mouvement demande a eviter. */
@media (prefers-reduced-motion: reduce) {
    .bande-photo--fixe {
        clip-path: none;
    }

    .bande-photo--fixe picture {
        position: static;
        height: 100%;
    }
}

/* ------------------------------------------------ le bloc qui passe dessus */

/* Remonte par-dessus la bande photo. La marge negative est bornee : sur un
   petit ecran la photo est trop courte pour qu'on lui mange 7 rem. */
.panneau {
    position: relative;
    z-index: 1;
    margin-top: clamp(-7rem, -9vw, -2.5rem);
    padding: clamp(1.9rem, 4vw, 3.5rem);
    border-radius: var(--rayon);
    background: var(--blanc);
    box-shadow: var(--ombre-forte);
}

.panneau--large {
    max-width: 60rem;
}

/* ========================================================================== */
/*  En-tete de page interieure                                                */
/* ========================================================================== */

.entete-page {
    padding-block: clamp(3rem, 5.5vw, 5rem);
    background: var(--pale);
    text-align: center;
}

.entete-page__zone {
    max-width: calc(48rem + var(--marge) * 2);
}

.entete-page .lead {
    margin-inline: auto;
    max-width: 38rem;
}

/* ========================================================================== */
/*  Reperes                                                                   */
/* ========================================================================== */

.reperes {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 48em) {
    .reperes {
        grid-template-columns: repeat(3, 1fr);
    }
}

.repere {
    padding: 2rem 1.75rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--blanc);
    text-align: center;
    transition: box-shadow var(--transition), transform var(--transition);
}

.repere:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre);
}

.repere__pastille {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 1.1rem;
    border-radius: var(--rayon-pastille);
    background: var(--rouge-pale);
    color: var(--rouge);
}

.repere__valeur {
    margin: 0 0 0.3rem;
    color: var(--ardoise);
    font-size: var(--t-h3);
    font-weight: 700;
    line-height: 1.2;
}

.repere__legende {
    margin: 0;
    color: var(--gris-texte);
    font-size: var(--t-petit);
    line-height: 1.5;
}

/* ========================================================================== */
/*  Blocs « icone + titre + texte »                                           */
/* ========================================================================== */

.blocs {
    display: grid;
    gap: clamp(1.75rem, 3vw, 2.5rem);
}

.blocs--colonne {
    margin-top: 2.25rem;
    gap: 1.75rem;
}

/* Empiles les uns sous les autres, ces blocs se lisent mieux avec l'icone en
   vis-a-vis du titre plutot qu'au-dessus : le regard descend d'un titre au
   suivant sans etre coupe, et la colonne gagne la hauteur des trois pastilles. */
.blocs--colonne .bloc {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.15rem;
    row-gap: 0.5rem;
    align-items: center;
}

.blocs--colonne .bloc__pastille {
    margin-bottom: 0;
}

.blocs--colonne .bloc__titre {
    margin-bottom: 0;
}

/* Le texte reprend sous le titre, pas sous l'icone : le bloc garde un seul
   alignement a gauche. On le ramene aussi a une longueur de ligne lisible,
   sans quoi il occuperait toute la largeur du duo. */
.blocs--colonne .bloc__texte {
    grid-column: 2;
    max-width: 34rem;
}

@media (min-width: 48em) {
    .blocs--centre {
        grid-template-columns: repeat(3, 1fr);
    }

    .blocs--cartes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 66em) {
    .blocs--cartes {
        grid-template-columns: repeat(3, 1fr);
    }

    .blocs--quatre {
        grid-template-columns: repeat(4, 1fr);
    }
}

.bloc__pastille {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1.15rem;
    border-radius: var(--rayon-pastille);
    background: var(--rouge-pale);
    color: var(--rouge);
}

.icone {
    width: 27px;
    height: 27px;
}

/* Titre court en capitales condensees, bicolore comme les titres longs. */
.bloc__titre {
    margin: 0 0 0.7rem;
    color: var(--ardoise);
    font-family: var(--police-capitale);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bloc__titre .accent {
    color: var(--rouge-texte);
}

.bloc__texte {
    margin: 0;
    color: var(--gris-texte);
    font-size: var(--t-petit);
    line-height: 1.65;
}

/* En cartes : fond blanc, filet, meme rayon que les photos. */
.blocs--cartes .bloc {
    padding: 2.1rem 1.85rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--blanc);
    transition: box-shadow var(--transition), transform var(--transition);
}

.blocs--cartes .bloc:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre);
}

.blocs--centre .bloc {
    text-align: center;
}

.blocs--centre .bloc__pastille {
    margin-inline: auto;
}

/* ========================================================================== */
/*  Cartes d'expertise                                                        */
/* ========================================================================== */

.cartes {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (min-width: 46em) {
    .cartes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 68em) {
    .cartes {
        grid-template-columns: repeat(3, 1fr);
    }
}

.carte {
    display: flex;
    flex-direction: column;
    padding: 2.25rem 2rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--blanc);
    scroll-margin-top: calc(var(--entete-h) + 2rem);
    transition: box-shadow var(--transition), transform var(--transition),
                border-color var(--transition);
}

.carte:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: var(--ombre-forte);
}

.carte__pastille {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 1.4rem;
    border-radius: var(--rayon-pastille);
    background: var(--rouge-pale);
    color: var(--rouge);
}

.carte__titre {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.carte__texte {
    margin: 0;
    color: var(--gris-texte);
    font-size: var(--t-petit);
    line-height: 1.65;
}

/* ========================================================================== */
/*  Photos encadrees                                                          */
/* ========================================================================== */

/* La hauteur appartient au cadre, pas a l'image : le recadrage est ainsi
   previsible, quel que soit le rapport de la photo qu'on y place. */
.cadre {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

.cadre picture {
    display: block;
    height: 100%;
}

.cadre img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center var(--cadrage, 50%);
}

/* Les photos du client sont des portraits tres allonges (3:4). Laissees a
   leur rapport a cote d'une colonne de texte, elles la depassent de moitie et
   le duo se desequilibre : on borne donc leur hauteur, pas leur rapport. */
@media (min-width: 62em) {
    .cadre {
        aspect-ratio: auto;
        height: clamp(22rem, 30vw, 27rem);
    }

    .cadre--haut {
        height: clamp(24rem, 33vw, 29rem);
    }
}

/* ========================================================================== */
/*  Temoignages                                                               */
/* ========================================================================== */

.temoignages {
    display: grid;
    gap: 1.5rem;
}

.citation {
    position: relative;
    padding: clamp(2rem, 3.5vw, 3rem) clamp(1.75rem, 3vw, 2.75rem);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--blanc);
    box-shadow: var(--ombre);
}

.citation__signe {
    width: 36px;
    height: 36px;
    margin-bottom: 1.1rem;
    color: var(--rouge);
}

.etoiles {
    display: flex;
    gap: 3px;
    margin-bottom: 1rem;
    color: var(--rouge);
}

.etoiles__etoile {
    width: 18px;
    height: 18px;
}

.citation__texte {
    margin: 0;
    color: var(--ardoise);
    font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.45rem);
    font-weight: 300;
    line-height: 1.55;
}

.citation__signature {
    display: flex;
    flex-direction: column;
    margin-top: 1.6rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--ligne);
}

.citation__auteur {
    color: var(--ardoise);
    font-weight: 700;
}

.citation__fonction {
    color: var(--gris);
    font-family: var(--police-capitale);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ========================================================================== */
/*  Appel a l'action de fin de page                                           */
/* ========================================================================== */

.appel .titre {
    margin-inline: auto;
    max-width: 22ch;
}

.appel__texte {
    margin-inline: auto;
    max-width: 42rem;
}

/* ========================================================================== */
/*  Page de contact                                                           */
/* ========================================================================== */

.carte-formulaire {
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--blanc);
    box-shadow: var(--ombre);
}

.coord {
    display: grid;
    gap: 1.1rem;
}

.coord__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-petit);
    background: var(--blanc);
}

.coord__pastille {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: var(--rayon-pastille);
    background: var(--rouge-pale);
    color: var(--rouge);
}

.coord__pastille .icone {
    width: 21px;
    height: 21px;
}

.coord__libelle {
    display: block;
    color: var(--gris);
    font-family: var(--police-capitale);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.coord__valeur {
    color: var(--ardoise);
    font-weight: 600;
    text-decoration: none;
}

.coord__valeur:hover {
    text-decoration: underline;
}

/* Encart d'information, sous les coordonnees et face au formulaire.

   Il reprend la mise en page des blocs en colonne de l'accueil — pastille en
   vis-a-vis du titre — pour ne pas etre un motif de plus dans le vocabulaire
   du site, et le traitement de .carte-formulaire qui lui fait face, de sorte
   que les deux colonnes se lisent comme deux objets de meme nature.

   Le filet vertical rouge d'une version precedente a ete abandonne : une barre
   droite s'accorde mal avec un arrondi de 25px, qui la rogne a ses extremites.
   L'accent passe donc par la pastille, ou il forme une surface franche. */
/* Retrait, pastille et gouttiere sont repris a l'identique de .coord__item, qui
   precede l'encart dans la meme colonne : pastilles sur un meme axe vertical,
   et titre aligne sur les libelles des coordonnees. Trois valeurs a garder en
   phase avec .coord__item et .coord__pastille — les desynchroniser fait
   reapparaitre le decalage. L'encart garde sa presence propre par son arrondi,
   son ombre et son titre en capitales, pas par un retrait different. */
.encart {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0.85rem;
    align-items: center;
    padding: 1.6rem 1.35rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--blanc);
    box-shadow: var(--ombre);
    color: var(--ardoise);
    font-size: var(--t-petit);
    line-height: 1.65;
}

.encart__pastille {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--rayon-pastille);
    background: var(--rouge-pale);
    color: var(--rouge);
}

/* Sans cette regle l'icone garderait ses 27px par defaut : a pastille egale,
   son dessin pesserait plus lourd que celui des coordonnees juste au-dessus. */
.encart__pastille .icone {
    width: 21px;
    height: 21px;
}

.encart__titre {
    margin: 0;
    font-family: var(--police-capitale);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Le texte reprend sous le titre et non sous la pastille : l'encart garde un
   seul alignement a gauche, comme les blocs de l'accueil. */
.encart__texte {
    grid-column: 2;
    margin: 0;
}

.jeton-succes {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.75rem;
    border-radius: var(--rayon-pastille);
    background: var(--succes-fond);
    color: var(--succes);
}

.jeton-succes svg {
    width: 34px;
    height: 34px;
}

/* ------------------------------------------------------------- formulaire */

.form__ligne {
    margin-bottom: 1.15rem;
}

.form label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--ardoise);
    font-family: var(--police-capitale);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.form input,
.form select,
.form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ligne-champ);
    border-radius: var(--rayon-petit);
    background: var(--blanc);
    color: var(--ardoise);
    font-family: inherit;
    font-size: var(--t-corps);
    line-height: 1.5;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form textarea {
    min-height: 9rem;
    resize: vertical;
}

.form select {
    appearance: none;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868d94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 18px;
}

.form input::placeholder,
.form textarea::placeholder {
    color: var(--gris);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    border-color: var(--rouge);
    box-shadow: 0 0 0 3px rgba(228, 22, 37, 0.16);
    outline: none;
}

.form [aria-invalid='true'] {
    border-color: var(--alerte);
}

.form__aide {
    margin: 0.4rem 0 0;
    color: var(--gris);
    font-size: var(--t-micro);
}

.form__erreurs {
    margin: 0.45rem 0 0;
    padding: 0;
    color: var(--alerte);
    font-size: var(--t-micro);
}

.form__case {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.form__case input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.25rem;
    flex: none;
    accent-color: var(--rouge);
}

.form__case label {
    margin: 0;
    color: var(--gris-texte);
    font-family: var(--police-texte);
    font-size: var(--t-petit);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* Piege a robots : hors ecran plutot que display:none, que certains scripts
   savent detecter. */
.form__pot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__envoi {
    margin-top: 1.75rem;
}

/* ========================================================================== */
/*  Messages et pages legales                                                 */
/* ========================================================================== */

.flashes {
    padding-top: 1.5rem;
}

.alerte {
    margin: 0;
    padding: 0.95rem 1.25rem;
    border-radius: var(--rayon-petit);
    font-size: var(--t-petit);
}

.alerte--success {
    background: var(--succes-fond);
    color: var(--succes);
}

.alerte--error,
.alerte--danger {
    background: var(--alerte-fond);
    color: var(--alerte);
}

.texte-legal h2 {
    margin: 2.75rem 0 0.85rem;
    font-size: var(--t-h3);
    font-weight: 600;
}

.texte-legal h2:first-child {
    margin-top: 0;
}

.texte-legal ul {
    margin: 0 0 1.1em;
    padding-left: 1.15rem;
    list-style: disc;
}

.texte-legal li {
    margin-bottom: 0.35rem;
}

/* Trou a combler avant mise en ligne : impossible a manquer a l'ecran, et
   trouvable par une recherche sur "a-completer" dans templates/legal. */
.a-completer {
    padding: 0.1em 0.4em;
    border-radius: 4px;
    background: var(--rouge-pale);
    box-shadow: inset 0 -2px 0 var(--rouge);
    font-style: italic;
}

/* ========================================================================== */
/*  Pied de page                                                              */
/* ========================================================================== */

.pied {
    padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
    background: var(--ardoise-fonce);
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--t-petit);
}

.pied__haut {
    display: grid;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--ligne-claire);
}

@media (min-width: 52em) {
    .pied__haut {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 3rem;
    }
}

.pied .marque__nom {
    color: var(--blanc);
}

.pied .marque__ligne {
    color: rgba(255, 255, 255, 0.55);
}

.pied__texte {
    margin: 1.25rem 0 0;
    max-width: 26rem;
    line-height: 1.65;
}

.pied__titre {
    margin: 0 0 1.1rem;
    color: var(--blanc);
    font-family: var(--police-capitale);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.pied__liens {
    display: grid;
    gap: 0.65rem;
}

.pied__liens a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

.pied__liens a:hover {
    color: var(--blanc);
    text-decoration: underline;
}

.pied__liens--coord li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.pied__icone {
    width: 17px;
    height: 17px;
    flex: none;
    color: var(--rouge);
}

.pied__bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.85rem 1.75rem;
    margin-top: 1.75rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--t-micro);
}

.pied__bas p {
    margin: 0;
}

.pied__bas ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.35rem;
}

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

.pied__bas a:hover {
    color: var(--blanc);
    text-decoration: underline;
}

/* ========================================================================== */
/*  Utilitaires d'espacement                                                  */
/* ========================================================================== */

/* En fin de fichier a dessein : plusieurs composants remettent leur marge a
   zero (.titre, .mention, .lead...). A specificite egale c'est l'ordre qui
   tranche, donc ces classes doivent etre declarees apres eux pour agir. */

.espace-s { margin-top: 1.5rem; }
.espace-m { margin-top: 2.25rem; }