/*
 * 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 et 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. */
.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;
}

/* Variante inversee : le gris ouvre, le rouge ferme. Elle porte les deux titres
   qui posent la question « Pourquoi Orbistix ? » — celui de la page dediee et
   celui de la section de l'accueil — ou l'accent doit tomber sur le nom du
   cabinet plutot que sur l'interrogation qui l'introduit.

   Couleur et graisse changent de cote ensemble : le titre passe en gras rouge,
   et c'est le <strong> qui repasse en maigre gris. Le rythme de la signature
   du site est conserve — un mot appuye, un mot en retrait — simplement
   inverse. Comme le mot rouge n'est pas dans un element a lui, la graisse est
   posee sur le titre entier puis retiree du <strong>.

   Les deux teintes tiennent leurs seuils aux tailles concernees. Sur le gris
   pale de .entete-page, --rouge donne 4,2:1 et --gris-titre 3,3:1, au-dessus
   du 3:1 exige pour du grand texte — les titres font ici 30px au minimum, un
   h1 38px. Ni l'une ni l'autre ne conviendrait a un paragraphe. */
.titre--inverse {
    color: var(--rouge);
    font-weight: 700;
}

.titre--inverse strong {
    color: var(--gris-titre);
    font-weight: 300;
}

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);
}

/* Meme bande, mais bornee par la hauteur de la fenetre : le panneau qui la
   chevauche doit tenir au-dessus de la ligne de flottaison. Employee sur
   /ils-nous-ont-fait-confiance, ou le titre et les avis sont toute la page.

   Le plafond ne peut pas etre qu'en rem. Une fenetre de 1440 x 950 et une de
   1440 x 720 franchissent un plafond en rem au meme endroit, alors que la
   ligne de flottaison a bouge de 230 px entre les deux : seule une unite de
   fenetre suit.

   Les 58 % viennent d'un calcul a rebours. Le bas du panneau tombe a
   entete (5,25rem) + photo - chevauchement (7rem) + son contenu (265 px
   mesures a 1440 px de large). Pour qu'il tienne, la photo doit rester sous
   la hauteur de fenetre moins 237 px, soit 58 % environ sur toute la plage
   courante de 650 a 950 px.

   svh et non vh : c'est la fenetre barre d'adresse deployee, donc le pire
   cas — exactement ce que « au-dessus de la ligne de flottaison » designe.
   La hauteur en rem est redeclaree juste avant pour qu'un navigateur sans
   svh, qui jetterait le min() entier, garde une bande a la bonne echelle au
   lieu de retomber sur les 21rem de .bande-photo. */
.bande-photo--moyenne {
    height: clamp(21rem, 34vw, 28rem);
    height: min(clamp(21rem, 34vw, 28rem), 58svh);
}

/*
 * 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                                                        */
/* ========================================================================== */

/* Cinq cartes ne remplissent ni deux ni trois colonnes : la derniere rangee
   reste incomplete. Une grille la callerait a gauche en laissant un vide a
   droite, alors qu'en flex elle se centre d'elle-meme — et ce quel que soit le
   nombre de cartes, donc en ajouter ou en retirer ne demandera pas d'y revenir.

   La largeur de base reproduit exactement ce que donnaient les colonnes 1fr :
   la place disponible moins les gouttieres, divisee par le nombre de colonnes.
   D'ou la gouttiere sortie en variable, pour n'etre ecrite qu'une fois.

   Les cartes d'une meme rangee gardent une hauteur egale, l'etirement etant le
   comportement par defaut d'une ligne flex comme d'une rangee de grille. */
.cartes {
    --cartes-gouttiere: clamp(1.25rem, 2.5vw, 1.75rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cartes-gouttiere);
}

.cartes > .carte {
    flex: 0 1 100%;
}

@media (min-width: 46em) {
    .cartes > .carte {
        flex-basis: calc((100% - var(--cartes-gouttiere)) / 2);
    }
}

@media (min-width: 68em) {
    .cartes > .carte {
        flex-basis: calc((100% - var(--cartes-gouttiere) * 2) / 3);
    }
}

.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;
}

/* ========================================================================== */
/*  Plan du site                                                              */
/* ========================================================================== */

/* Une carte par rubrique, dans la grille .cartes deja en place. Les liens
   restent soulignes au survol : ici, contrairement au reste du site, ce sont
   des reperes de navigation et non des appels a l'action, une pastille rouge
   par ligne serait illisible. */
.plan__liens {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-petit);
}

.plan__liens li + li {
    margin-top: 0.6rem;
}

.plan__liens a {
    color: var(--gris-texte);
    text-decoration: none;
}

.plan__liens a:hover,
.plan__liens a:focus-visible {
    color: var(--rouge);
    text-decoration: underline;
}

/* ========================================================================== */
/*  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);
}

.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; }