/* =============================================================
   Armabeton, feuille commune aux trois directions.
   Mobile first. Points de rupture 576 / 768 / 920 / 1024 / 1280.

   Ce fichier porte la structure, la typographie, les grilles et
   tous les composants. Il ne contient aucune couleur en dur :
   chaque valeur passe par une variable que `theme-a.css`,
   `theme-b.css` ou `theme-c.css` renseigne. Le header charge
   base.css, puis le thème actif.

   Les maquettes portaient tout en attribut `style` ; rien n'en
   subsiste dans le rendu, tout est ici.
   ============================================================= */

/* --- Polices, servies depuis le site -------------------------
   Instrument Sans est une police variable : un seul fichier par
   sous-ensemble couvre les graisses 400 à 700, d'où la plage
   `font-weight: 400 700` plutôt que quatre déclarations.
   Aucun appel à Google Fonts, aucune requête sortante.        */

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Libre Caslon Text';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/libre-caslon-text-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Libre Caslon Text';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/libre-caslon-text-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Libre Caslon Text';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/libre-caslon-text-400-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Libre Caslon Text';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/libre-caslon-text-400-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Libre Caslon Text';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/libre-caslon-text-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Libre Caslon Text';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/libre-caslon-text-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Remise à zéro ------------------------------------------- */

a, address, article, aside, blockquote, body, button, dd, div, dl, dt, em,
fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header,
hgroup, html, i, img, input, label, legend, li, main, nav, ol, p, picture,
section, select, small, span, strong, sub, summary, sup, svg, table, tbody,
td, tfoot, th, thead, time, tr, ul {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    font-weight: 400;
}

html {
    font-size: 62.5%;
}

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

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

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

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

img {
    display: block;
    height: auto;
}

picture {
    display: contents;
}

/* --- Jetons de base ------------------------------------------
   Les valeurs de couleur viennent du thème. Ce bloc ne fixe que
   les mesures, les familles et les rôles.                      */

:root {
    --police-texte: 'Instrument Sans', system-ui, 'Helvetica Neue', Arial, sans-serif;
    --police-titre: 'Libre Caslon Text', 'Times New Roman', Georgia, serif;

    --conteneur: 128rem;
    --gouttiere: 2rem;
    --rayon: 0;
    --rayon-pilule: 0;
    --rayon-carte: 0;

    --pas-section: 5.6rem;

    /* Rôles de section : réglés par `.section--alt` et
       `.section--appui`, lus par tous les composants. */
    --sec-fond: var(--fond);
    --sec-encre: var(--encre);
    --sec-doux: var(--encre-doux);
    --sec-faible: var(--encre-faible);
    --sec-filet: var(--filet);
    --sec-carte: var(--carte);
    --sec-accent: var(--accent-lisible);
    --sec-bordure-bouton: var(--bordure-bouton);
}

html {
    background-color: var(--fond);
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    background-color: var(--fond);
    color: var(--encre);
    font-family: var(--police-texte);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

strong,
b {
    font-weight: 600;
}

em,
i {
    font-style: italic;
}

/* Anneau de focus en `currentColor` : il contraste toujours avec le fond
   qu'il traverse, puisque le texte qu'il entoure y est déjà lisible. Une
   couleur fixe échouerait sur l'une des trois directions ou sur les bandes
   sombres qui les traversent toutes. */
:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

.lien-evitement {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 80;
    padding: 1.2rem 2rem;
    background-color: var(--accent);
    color: var(--accent-encre);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lien-evitement:focus {
    top: 1.6rem;
    left: 1.6rem;
}

.sprite-icones {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

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

.icone {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    flex: none;
    vertical-align: -0.4rem;
}

.fleche {
    display: inline-block;
    width: 2.4rem;
    height: 1.2rem;
    margin-left: 0.8rem;
    vertical-align: middle;
    transition: transform 0.18s ease;
}

/* --- Ossature ------------------------------------------------- */

.conteneur {
    width: 100%;
    max-width: var(--conteneur);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
}

.section {
    padding-block: var(--pas-section);
    background-color: var(--sec-fond);
    color: var(--sec-encre);
}

.section--serree {
    padding-block: calc(var(--pas-section) * 0.62);
}

.section--alt {
    --sec-fond: var(--fond-alt);
    --sec-carte: var(--carte-alt);
}

.section--appui {
    --sec-fond: var(--appui-fond);
    --sec-encre: var(--appui-encre);
    --sec-doux: var(--appui-doux);
    --sec-faible: var(--appui-faible);
    --sec-filet: var(--appui-filet);
    --sec-carte: var(--appui-carte);
    --sec-accent: var(--appui-accent);
    --sec-bordure-bouton: var(--appui-bordure-bouton);
}

.section + .section {
    border-top: 1px solid var(--sec-filet);
}

/* --- Typographie ---------------------------------------------- */

.surtitre {
    display: block;
    margin-bottom: 1.4rem;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sec-accent);
}

.surtitre--sourdine {
    color: var(--sec-faible);
}

.titre-affiche {
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: clamp(3.6rem, 8.5vw, 5.4rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.titre-section {
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: clamp(2.6rem, 4.6vw, 3.6rem);
    line-height: 1.12;
    letter-spacing: -0.005em;
    text-wrap: pretty;
}

.chapo {
    margin-top: 2.2rem;
    max-width: 62ch;
    font-size: 1.8rem;
    line-height: 1.55;
    color: var(--sec-doux);
}

.texte {
    margin-top: 1.6rem;
    max-width: 68ch;
    color: var(--sec-doux);
}

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

.mention {
    margin-top: 1.6rem;
    font-size: 1.4rem;
    color: var(--sec-faible);
}

/* Deux colonnes au-dessus de 920 px, deux blocs empilés en dessous. La
   gouttière est déclarée ici plutôt que dans la règle à deux colonnes, sinon
   les blocs se touchent en mise en page étroite et le dernier lien d'un bloc
   vient buter contre le surtitre du suivant. */
.grille-deux {
    display: grid;
    gap: 3.2rem;
}

.entete-section {
    display: grid;
    gap: 1.6rem;
    margin-bottom: 3.6rem;
}

.entete-section .chapo {
    margin-top: 0;
}

.entete-section-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.6rem 3.2rem;
    margin-bottom: 3.2rem;
}

.lien-fleche {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: var(--sec-encre);
    border-bottom: 1px solid var(--sec-accent);
    padding-bottom: 0.2rem;
}

.lien-fleche:hover .fleche,
.lien-fleche:focus-visible .fleche {
    transform: translateX(0.3rem);
}

/* --- Boutons --------------------------------------------------- */

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 3rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.5rem 2.4rem;
    border: 1px solid transparent;
    border-radius: var(--rayon-pilule);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.btn-accent {
    background-color: var(--accent);
    color: var(--accent-encre);
}

.btn-accent:hover,
.btn-accent:focus-visible {
    background-color: var(--accent-vif);
}

.btn-contour {
    border-color: var(--sec-bordure-bouton);
    color: var(--sec-encre);
}

.btn-contour:hover,
.btn-contour:focus-visible {
    border-color: var(--sec-encre);
}

/* --- En-tête ---------------------------------------------------- */

.entete {
    position: relative;
    z-index: 40;
    background-color: var(--entete-fond);
    color: var(--entete-encre);
    border-bottom: 1px solid var(--entete-filet);
}

.entete-bandeau {
    display: none;
    border-bottom: 1px solid var(--entete-filet);
    font-size: 1.2rem;
    color: var(--entete-faible);
}

.entete-bandeau-interieur {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem 2.4rem;
    padding-block: 0.8rem;
}

.entete-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem 2.4rem;
    padding-block: 1.4rem;
}

.marque {
    display: flex;
    flex: none;
    align-items: center;
    gap: 1.2rem;
}

.marque-plaque {
    display: inline-flex;
    align-items: center;
    padding: var(--plaque-marge);
    background-color: var(--plaque-fond);
    border-radius: var(--rayon);
}

.marque-logo {
    width: 15rem;
    height: auto;
}

.marque-mention {
    display: none;
    white-space: nowrap;
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--entete-faible);
}

.nav {
    display: none;
    min-width: 0;
}

.nav-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    font-size: 1.4rem;
}

.nav-liste a {
    display: block;
    padding-block: 0.4rem;
    color: var(--entete-encre-doux);
    border-bottom: 2px solid transparent;
}

.nav-liste a:hover,
.nav-liste a:focus-visible {
    color: var(--entete-encre);
}

.nav-liste a[aria-current='page'] {
    color: var(--entete-actif);
    border-bottom-color: var(--entete-actif);
}

.entete-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 1.6rem;
}

.entete-telephone {
    display: none;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    font-size: 1.4rem;
    color: var(--entete-encre-doux);
}

.entete-telephone:hover,
.entete-telephone:focus-visible {
    color: var(--entete-encre);
}

.entete-devis {
    display: none;
    padding: 1.2rem 1.8rem;
    white-space: nowrap;
    font-size: 1.4rem;
}

.nav-bascule {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--entete-filet);
    border-radius: var(--rayon);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--entete-encre);
}

.nav-bascule-barres {
    position: relative;
    display: block;
    width: 1.8rem;
    height: 0.2rem;
    background-color: currentColor;
}

.nav-bascule-barres::before,
.nav-bascule-barres::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.2rem;
    background-color: currentColor;
}

.nav-bascule-barres::before {
    top: -0.6rem;
}

.nav-bascule-barres::after {
    top: 0.6rem;
}

.nav-bascule[aria-expanded='true'] .nav-bascule-barres {
    background-color: transparent;
}

.nav-bascule[aria-expanded='true'] .nav-bascule-barres::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-bascule[aria-expanded='true'] .nav-bascule-barres::after {
    top: 0;
    transform: rotate(-45deg);
}

.nav-mobile {
    border-top: 1px solid var(--entete-filet);
    padding-block: 1.6rem 2.4rem;
    background-color: var(--entete-fond);
}

.nav-mobile-liste {
    display: grid;
    gap: 0.2rem;
}

.nav-mobile-liste a {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.2rem 1.2rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--entete-filet);
    color: var(--entete-encre);
}

.nav-mobile-liste .icone {
    grid-row: span 2;
    color: var(--entete-actif);
}

.nav-mobile-label {
    font-size: 1.6rem;
    font-weight: 600;
}

.nav-mobile-note {
    font-size: 1.3rem;
    color: var(--entete-faible);
}

.nav-mobile-liste a[aria-current='page'] .nav-mobile-label {
    color: var(--entete-actif);
}

.nav-mobile-devis {
    background-color: var(--accent);
    color: var(--accent-encre);
    padding-inline: 1.4rem;
    margin-top: 0.8rem;
}

.nav-mobile-devis .icone,
.nav-mobile-devis .nav-mobile-note {
    color: var(--accent-encre);
}

.nav-mobile-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    margin-top: 1.8rem;
    font-size: 1.4rem;
    color: var(--entete-encre-doux);
}

.nav-mobile-contact a {
    border-bottom: 1px solid var(--entete-filet);
}

/* --- Fil d'Ariane ----------------------------------------------- */

.fil-ariane-barre {
    background-color: var(--hero-fond);
    color: var(--hero-encre);
    padding-block: 1.6rem 0;
}

.fil-ariane ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hero-faible);
}

.fil-ariane li + li::before {
    content: '/';
    margin-right: 0.8rem;
    color: var(--hero-faible);
}

.fil-ariane a:hover,
.fil-ariane a:focus-visible {
    color: var(--hero-encre);
}

.fil-ariane [aria-current='page'] {
    color: var(--hero-accent);
}

/* --- Hero -------------------------------------------------------- */

.hero {
    background-color: var(--hero-fond);
    color: var(--hero-encre);
    padding-block: 4.8rem 5.6rem;
    --sec-encre: var(--hero-encre);
    --sec-doux: var(--hero-doux);
    --sec-faible: var(--hero-faible);
    --sec-filet: var(--hero-filet);
    --sec-accent: var(--hero-accent);
    --sec-carte: var(--hero-carte);
    --sec-bordure-bouton: var(--hero-bordure-bouton);
}

.fil-ariane-barre + .hero {
    padding-top: 2.8rem;
}

.hero-grille {
    display: grid;
    gap: 3.2rem;
}

.hero-titre {
    margin-top: 0.4rem;
}

.hero .chapo {
    color: var(--hero-doux);
}

.hero-encart {
    align-self: end;
}

/* Bandeau de capacités : la ligne de mots-clés sous le hero. */
.bandeau-capacites {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--hero-filet);
    background-color: var(--hero-fond);
    color: var(--hero-encre);
}

.bandeau-capacites li {
    flex: 1 1 16rem;
    padding: 1.6rem var(--gouttiere);
    border-bottom: 1px solid var(--hero-filet);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hero-doux);
}

.bandeau-capacites li + li {
    border-left: 1px solid var(--hero-filet);
}

/* --- Grilles filaires -------------------------------------------- */

.grille-filaire {
    display: grid;
    gap: 1px;
    background-color: var(--sec-filet);
    border: 1px solid var(--sec-filet);
}

.grille-filaire > * {
    background-color: var(--sec-carte);
    padding: 2.4rem;
}

.cellule-titre {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sec-accent);
}

.cellule-texte {
    margin-top: 0.8rem;
    font-size: 1.5rem;
    color: var(--sec-doux);
}

/* --- Cartes de métier -------------------------------------------- */

.grille-cartes {
    display: grid;
    gap: 1.6rem;
}

.carte {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2.4rem;
    background-color: var(--sec-carte);
    border: 1px solid var(--sec-filet);
    border-radius: var(--rayon-carte);
}

.carte-numero {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--sec-accent);
}

.carte-titre {
    font-family: var(--police-titre);
    font-size: 2.1rem;
    line-height: 1.2;
}

.carte-texte {
    font-size: 1.5rem;
    color: var(--sec-doux);
}

.carte-appel {
    margin-top: auto;
    padding-top: 1.2rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--sec-encre);
}

a.carte:hover,
a.carte:focus-visible {
    border-color: var(--sec-encre);
}

a.carte:hover .fleche,
a.carte:focus-visible .fleche {
    transform: translateX(0.3rem);
}

.carte-icone {
    width: 2.8rem;
    height: 2.8rem;
    color: var(--sec-accent);
}

/* --- Fiches de spécifications ------------------------------------ */

.fiche {
    margin-top: 2.4rem;
    border-top: 1px solid var(--sec-filet);
}

.fiche-ligne {
    display: grid;
    gap: 0.2rem 2rem;
    padding-block: 1.2rem;
    border-bottom: 1px solid var(--sec-filet);
}

.fiche-ligne dt {
    font-size: 1.3rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sec-faible);
}

.fiche-ligne dd {
    font-size: 1.5rem;
    color: var(--sec-encre);
}

/* --- Tableaux ----------------------------------------------------- */

.tableau-enveloppe {
    margin-top: 2.4rem;
    overflow-x: auto;
    border: 1px solid var(--sec-filet);
}

.tableau {
    width: 100%;
    min-width: 62rem;
    font-size: 1.5rem;
}

.tableau th,
.tableau td {
    padding: 1.4rem 1.6rem;
    text-align: left;
    border-bottom: 1px solid var(--sec-filet);
}

.tableau thead th {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sec-faible);
    background-color: var(--sec-fond);
}

.tableau tbody th {
    font-weight: 600;
    white-space: nowrap;
}

.tableau tbody tr:last-child th,
.tableau tbody tr:last-child td {
    border-bottom: 0;
}

.tableau td {
    color: var(--sec-doux);
}

/* --- Étapes -------------------------------------------------------- */

.etapes {
    display: grid;
    gap: 1px;
    margin-top: 3.2rem;
    background-color: var(--sec-filet);
    border: 1px solid var(--sec-filet);
}

.etape {
    background-color: var(--sec-carte);
    padding: 2.4rem;
}

.etape-rang {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sec-accent);
}

.etape-titre {
    margin-top: 0.8rem;
    font-family: var(--police-titre);
    font-size: 2rem;
    line-height: 1.2;
}

.etape-texte {
    margin-top: 0.8rem;
    font-size: 1.5rem;
    color: var(--sec-doux);
}

/* --- Listes -------------------------------------------------------- */

.liste-check {
    display: grid;
    gap: 1.2rem;
    margin-top: 2.4rem;
}

.liste-check li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    align-items: start;
    color: var(--sec-doux);
}

.liste-check .icone {
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.4rem;
    color: var(--sec-accent);
}

/* --- Questions ------------------------------------------------------ */

.questions {
    display: grid;
    gap: 1px;
    background-color: var(--sec-filet);
    border: 1px solid var(--sec-filet);
}

.question {
    background-color: var(--sec-carte);
    padding: 2.4rem;
}

.question-titre {
    font-family: var(--police-titre);
    font-size: 1.9rem;
    line-height: 1.25;
}

.question-reponse {
    margin-top: 0.8rem;
    font-size: 1.5rem;
    color: var(--sec-doux);
}

.groupe-faq + .groupe-faq {
    margin-top: 4rem;
}

.groupe-faq-entete {
    margin-bottom: 2rem;
}

/* --- Réalisations ---------------------------------------------------- */

.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 3.2rem;
}

.filtre {
    padding: 0.9rem 1.6rem;
    border: 1px solid var(--sec-filet);
    border-radius: var(--rayon-pilule);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--sec-doux);
}

.filtre[aria-pressed='true'] {
    background-color: var(--sec-encre);
    border-color: var(--sec-encre);
    color: var(--sec-fond);
}

.realisation-lieu {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sec-accent);
}

.realisation-titre {
    margin-top: 1rem;
    font-family: var(--police-titre);
    font-size: 2.2rem;
    line-height: 1.2;
}

.realisation-texte {
    margin-top: 0.8rem;
    font-size: 1.5rem;
    color: var(--sec-doux);
}

.realisation-lots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.6rem;
}

.realisation-lots li {
    padding: 0.4rem 1rem;
    border: 1px solid var(--sec-filet);
    border-radius: var(--rayon-pilule);
    font-size: 1.2rem;
    color: var(--sec-faible);
}

.filtres-vide {
    margin-top: 2.4rem;
    color: var(--sec-doux);
}

/* --- Blog -------------------------------------------------------------- */

.carte-billet {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2.4rem;
    background-color: var(--sec-carte);
    border: 1px solid var(--sec-filet);
    border-radius: var(--rayon-carte);
}

.billet-etiquette {
    align-self: start;
    padding: 0.4rem 1rem;
    border: 1px solid var(--sec-filet);
    border-radius: var(--rayon-pilule);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sec-accent);
}

.billet-titre {
    font-family: var(--police-titre);
    font-size: 2.1rem;
    line-height: 1.22;
}

.billet-texte {
    font-size: 1.5rem;
    color: var(--sec-doux);
}

.billet-etat {
    margin-top: auto;
    padding-top: 1.2rem;
    font-size: 1.3rem;
    color: var(--sec-faible);
}

.billet-une {
    padding: 3.2rem 2.4rem;
}

.billet-une .billet-titre {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
}

/* --- Panneaux et avis --------------------------------------------------- */

.panneau {
    padding: 2.8rem 2.4rem;
    background-color: var(--sec-carte);
    border: 1px solid var(--sec-filet);
    border-radius: var(--rayon-carte);
}

.panneau-titre {
    font-family: var(--police-titre);
    font-size: 2.4rem;
    line-height: 1.2;
}

.avis-service {
    margin-top: 1.6rem;
    padding: 1.8rem 2rem;
    border-left: 3px solid var(--sec-accent);
    background-color: var(--sec-fond);
    font-size: 1.5rem;
    color: var(--sec-doux);
}

.espace-haut {
    margin-top: 2.8rem;
}

.appel-final {
    display: grid;
    gap: 1.6rem;
    align-items: center;
}

.appel-final .actions {
    margin-top: 0;
}

/* --- Pied de page ------------------------------------------------------------ */

.pied {
    background-color: var(--pied-fond);
    color: var(--pied-encre);
    padding-block: 4.8rem 2.4rem;
    border-top: 1px solid var(--pied-filet);
}

.pied-grille {
    display: grid;
    gap: 3.2rem;
}

.pied-plaque {
    margin-bottom: 1.8rem;
}

.pied-logo {
    width: 16rem;
}

.pied-phrase {
    max-width: 42ch;
    font-size: 1.5rem;
    color: var(--pied-doux);
}

.pied-adresse {
    margin-top: 1.8rem;
    font-size: 1.5rem;
    font-style: normal;
    line-height: 1.9;
    color: var(--pied-doux);
}

.pied-adresse a:hover,
.pied-adresse a:focus-visible {
    color: var(--pied-encre);
}

.pied-titre {
    margin-bottom: 1.4rem;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pied-faible);
}

.pied-colonne li + li {
    margin-top: 0.8rem;
}

.pied-colonne a {
    font-size: 1.5rem;
    color: var(--pied-doux);
}

.pied-colonne a:hover,
.pied-colonne a:focus-visible {
    color: var(--pied-encre);
}

.pied-horaire {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem 1.6rem;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--pied-filet);
    font-size: 1.4rem;
}

.pied-horaire dt {
    color: var(--pied-doux);
}

.pied-horaire dd {
    color: var(--pied-encre);
}

.pied-bas {
    display: grid;
    gap: 1.2rem;
    margin-top: 4rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--pied-filet);
    font-size: 1.3rem;
    color: var(--pied-faible);
}

.pied-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
}

.pied-legal a:hover,
.pied-legal a:focus-visible {
    color: var(--pied-encre);
}

/* --- Appel flottant ------------------------------------------------------------ */

.appel-flottant {
    position: fixed;
    right: 1.6rem;
    bottom: 1.6rem;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.3rem 1.8rem;
    background-color: var(--accent);
    color: var(--accent-encre);
    border-radius: var(--rayon-pilule);
    font-size: 1.5rem;
    font-weight: 600;
    box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.22);
}

.appel-flottant-glyphe {
    width: 1.8rem;
    height: 1.8rem;
}

/* --- Page d'erreur ---------------------------------------------------------------- */

.erreur-code {
    font-family: var(--police-titre);
    font-size: clamp(7rem, 22vw, 14rem);
    line-height: 0.9;
    color: var(--sec-accent);
}

/* --- Pages légales ------------------------------------------------------------------ */

.prose {
    max-width: 74ch;
}

.prose h2 {
    margin-top: 4rem;
    font-family: var(--police-titre);
    font-size: clamp(2.2rem, 3.6vw, 2.8rem);
    line-height: 1.2;
}

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

.prose h3 {
    margin-top: 2.8rem;
    font-size: 1.8rem;
    font-weight: 600;
}

.prose p,
.prose ul {
    margin-top: 1.6rem;
    color: var(--sec-doux);
}

.prose li {
    position: relative;
    padding-left: 2rem;
    margin-top: 0.8rem;
}

.prose li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1rem;
    width: 0.8rem;
    height: 0.2rem;
    background-color: var(--sec-accent);
}

.prose a {
    border-bottom: 1px solid var(--sec-accent);
}

/* =========================================================================
   Ruptures
   ========================================================================= */

@media (min-width: 576px) {
    :root {
        --gouttiere: 2.8rem;
        --pas-section: 6.4rem;
    }

    .marque-logo {
        width: 17rem;
    }

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

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

    .pied-bas {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .fiche-ligne {
        grid-template-columns: 20rem 1fr;
        align-items: baseline;
    }
}

@media (min-width: 768px) {
    :root {
        --pas-section: 7.2rem;
    }

    body {
        font-size: 1.7rem;
    }

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

    .entete-section {
        grid-template-columns: 1fr 1fr;
        align-items: end;
        gap: 2.4rem 4rem;
    }

    .pied-grille {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }

    .appel-final {
        grid-template-columns: 1fr auto;
        gap: 2.4rem 4rem;
    }

    .marque-mention {
        display: inline;
    }
}

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

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

    .etapes--trois {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-grille {
        grid-template-columns: 1.15fr 0.85fr;
        gap: 4.8rem;
        align-items: end;
    }

    /* La direction A n'a pas d'encart : son titre prend toute la largeur
       plutôt que de laisser une colonne vide. */
    .hero-grille--seule {
        grid-template-columns: 1fr;
    }

    .grille-deux {
        grid-template-columns: 1fr 1fr;
        gap: 4.8rem;
        align-items: start;
    }

    .grille-deux--large {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .pied-grille {
        grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
        gap: 3.2rem;
    }

    .entete-telephone {
        display: inline-flex;
    }
}

@media (min-width: 1024px) {
    :root {
        --gouttiere: 4rem;
        --pas-section: 8rem;
    }

    .entete-bandeau {
        display: block;
    }

    .entete-barre {
        padding-block: 1.8rem;
    }

    .nav {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
    }

    .nav-liste {
        justify-content: center;
    }

    .entete-devis {
        display: inline-flex;
    }

    .nav-bascule {
        display: none;
    }

    .nav-mobile {
        display: none;
    }

    .hero {
        padding-block: 7.2rem 6.4rem;
    }

    .fil-ariane-barre + .hero {
        padding-top: 3.6rem;
    }

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

    .questions {
        grid-template-columns: repeat(3, 1fr);
    }

    .marque-logo {
        width: 19rem;
    }

    .appel-flottant {
        display: none;
    }
}

@media (min-width: 1280px) {
    .nav-liste {
        gap: 0.6rem 2.2rem;
    }

    .grille-cartes--six {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media print {
    .entete,
    .pied,
    .appel-flottant,
    .nav-mobile,
    .filtres {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }
}