@charset "UTF-8";
/* ==========================================================================
   Raon Informatique — feuille de style du site

   Écrite à la main. Les valeurs numériques ne sont pas approchées à l'œil :
   elles sont relevées sur le rendu du site d'origine (thème Divi + thème
   enfant) avec un navigateur piloté, puis reportées ici. Aucun reliquat
   de classe et_pb_*.

   Référence de mesure : fenêtre de 1440 px de large.

   Sommaire
     1. Jetons
     2. Base
     3. Enveloppe et grille
     4. En-tête
     5. Pied de page
     6. Blocs de contenu
     7. Formulaire
     8. Utilitaires
     9. Mobile
   ========================================================================== */

/* ==========================================================================
   1. Jetons
   ========================================================================== */

:root {
    /* Ce site s'affiche sur fond clair, et il le DÉCLARE.
       Sans cette ligne, Chrome sur Android se donne le droit de recalculer
       les couleurs quand le visiteur a coché l'assombrissement automatique
       des pages — une case des réglages du navigateur, indépendante du thème
       du système. Mesuré avant : sur la page Contact à 390 px, 72,4 % des
       pixels du premier écran changent. Le fond blanc devient noir, les
       champs du formulaire deviennent des cadres vides, et le bleu nuit
       #283851 — l'identité du magasin — devient un gris-lavande pâle sur les
       titres, tandis que le pied de page garde son bleu nuit : deux bleus
       différents sur la même page. Rien n'est illisible, et c'est le piège :
       le défaut est invisible depuis un ordinateur.
       `only light` demande au navigateur de ne pas y toucher. Écrire une
       vraie palette sombre serait l'autre réponse : plusieurs jours, tous les
       textes blancs sur photo à reprendre, et la comparaison avec l'ancien
       site perdue sur les huit pages. */
    color-scheme: only light;

    /* Couleurs relevées sur le site d'origine */
    --navy: #283851;
    --ink: #232323;
    --ink-pure: #000000;
    --white: #ffffff;
    --off-white: #fefefe;
    --grey-bg: #f7f7f7;
    --ink-faint: #898989;
    --field-border: #767676;
    --mobile-bar: #111111;
    --error: #a32b22;
    --ok: #1f6349;

    /* Voile dégradé posé sur les photos de service */
    --photo-veil: linear-gradient(rgba(255, 255, 255, 0) 0%, var(--navy) 79%);

    /* Typographie */
    --sans: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
    --condensed: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

    /* Gabarit — trois gouttières, comme les trois réglages de Divi utilisés */
    --row: 1080px;
    --gutter: 5.5%;
    --gutter-narrow: 3%;

    /* Ombres relevées : en-tête (préréglage 3, étalement -18px) et cartes */
    --header-shadow: 0 12px 18px -18px rgba(0, 0, 0, 0.3);
    --card-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3);

    --transition: 0.3s ease;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.7em;
    /* Relevé sur l'original : le corps de page est composé en graisse 500, pas
       400. Open Sans étant une police variable, 500 est une graisse réelle —
       la même chaîne mesure 335,9 px en 400 et 341,3 px en 500. */
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding-bottom: 10px;
    color: var(--navy);
    font-family: var(--sans);
    font-weight: 700;
    line-height: 1em;
    text-wrap: pretty;
}

h1 {
    font-size: 40px;
    line-height: 52px;
}

h2 {
    font-size: 26px;
    line-height: 26px;
}

h3 {
    font-size: 22px;
    line-height: 22px;
}

h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4em;
}

p {
    margin: 0;
    padding-bottom: 1em;
}

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

a {
    color: var(--navy);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--ink);
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
}

picture {
    display: contents;
}

ul,
ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

li {
    margin-bottom: 0.25em;
}

strong,
b {
    font-weight: 700;
}

button {
    font: inherit;
    color: inherit;
}

/* Indicateur de focus : un contour bleu nuit était invisible sur les
   nombreuses sections bleu nuit du site. Un double contour — clair puis
   sombre — reste perceptible sur tous les fonds. */
:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--navy);
    border-radius: 1px;
}

/* Sur fond clair, on inverse les deux couleurs. */
.section :focus-visible,
.prose :focus-visible,
.masthead :focus-visible,
.sitemap :focus-visible,
.legal :focus-visible,
.contact-grid__form :focus-visible,
.gallery :focus-visible {
    outline-color: var(--navy);
    box-shadow: 0 0 0 4px var(--white);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 12px 20px;
    background: var(--white);
    color: var(--navy);
    font-weight: 700;
}

.skip-link:focus {
    left: 0;
}

/* L’attribut hidden doit gagner sur les display des composants : plusieurs
   éléments sont livrés masqués et révélés par le script (bouton du menu
   mobile, voile). */
[hidden] {
    display: none !important;
}

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

/* ==========================================================================
   3. Enveloppe et grille
   ========================================================================== */

.section {
    position: relative;
    background: var(--white);
}

.row {
    width: 80%;
    max-width: var(--row);
    margin: 0 auto;
    position: relative;
}

/* Relevé sur l'original, à 981, 1100, 1280, 1440, 1600 et 1920 px de large :
   seules les rangées de CONTENU sont plafonnées (80 %, au plus 1080 px).
   L'en-tête et le bandeau de photos font 90 % de la fenêtre, le pied de page
   80 %, sans plafond ni l'un ni l'autre — à 1920 px, 1728 px et 1536 px. */
.row--wide {
    width: 90%;
    max-width: none;
}

.row--footer {
    width: 80%;
    max-width: none;
}

/* Colonnes : mêmes proportions et mêmes gouttières que le site d'origine. */
.cols {
    display: flex;
    flex-wrap: wrap;
}

.cols > * {
    margin-right: var(--gutter);
}

.cols > *:last-child {
    margin-right: 0;
}

.cols--2 > * {
    width: calc((100% - var(--gutter)) / 2);
}

.cols--3 > * {
    width: calc((100% - 2 * var(--gutter)) / 3);
}

.cols--4 > * {
    width: calc((100% - 3 * var(--gutter)) / 4);
}

/* Le bandeau de photos utilise une gouttière fixe de 38 px. */
.cols--5 {
    gap: 0 38px;
}

.cols--5 > * {
    width: calc((100% - 4 * 38px) / 5);
    margin-right: 0;
}

.cols--equal {
    align-items: stretch;
}

/* Photo posée en fond, en <img> et non en background CSS : la CSP interdit le
   style en ligne, et une balise se précharge et se décrit mieux. */
.bg-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Relevé : dégradé jusqu'à 79 %, multiplié sur la photo. */
.veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--photo-veil);
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* ==========================================================================
   4. En-tête
   ========================================================================== */

/* --- Barre de contact --------------------------------------------------- */

.topbar {
    background: var(--navy);
    color: var(--white);
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 0;
}

.topbar__info {
    margin: 0;
    padding: 0;
    color: var(--white);
    line-height: 1.7em;
}

.topbar__info b {
    font-weight: 700;
}

.topbar__info b + .reveal,
.topbar__info b + span {
    margin-right: 26px;
}

.topbar a,
.topbar .reveal {
    color: var(--white);
}

/* Le bouton garde son texte bleu nuit sur fond blanc. */
.topbar a.btn--light,
.topbar a.btn--light:hover {
    color: var(--navy);
}

.topbar a:hover,
.topbar .reveal:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* --- Bandeau logo + navigation ------------------------------------------ */

.masthead {
    background: var(--white);
    box-shadow: var(--header-shadow);
    position: relative;
    z-index: 50;
}

.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 11px 0;
}

.masthead__logo {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
}

.masthead__logo img {
    width: 240px;
    height: 75px;
    object-fit: contain;
}

/* --- Navigation --------------------------------------------------------- */

.nav {
    flex: 1 1 auto;
}

.nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__list > li {
    margin: 0;
    position: relative;
}

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--navy);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7em;
}

button.nav__link {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--sans);
}

.nav__link:hover {
    color: rgba(40, 56, 81, 0.7);
}

.nav__caret {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    fill: currentColor;
    transition: transform var(--transition);
}

.nav__sub {
    position: absolute;
    top: 100%;
    left: -20px;
    z-index: 60;
    min-width: 240px;
    margin: 0;
    padding: 20px 0;
    list-style: none;
    background: var(--white);
    border-top: 3px solid var(--navy);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.nav__item--has-sub:hover > .nav__sub,
.nav__item--has-sub:focus-within > .nav__sub,
.nav__item--open > .nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__item--has-sub:hover > .nav__link .nav__caret,
.nav__item--has-sub:focus-within > .nav__link .nav__caret,
.nav__item--open > .nav__link .nav__caret {
    transform: rotate(180deg);
}

/* Échap referme le sous-menu mais rend le focus à son bouton — donc
   :focus-within continuait de le tenir ouvert alors qu'aria-expanded annonçait
   « replié ». Cette classe, de même spécificité et posée plus bas, tranche. */
.nav__item--has-sub.nav__item--escaped > .nav__sub {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

.nav__item--has-sub.nav__item--escaped > .nav__link .nav__caret {
    transform: none;
}

.nav__sub li {
    margin: 0;
}

/* Relevé : 16 px / 28 px, comme les liens de premier niveau. */
.nav__sub a {
    display: block;
    padding: 6px 20px;
    font-size: 16px;
    line-height: 28px;
    font-weight: 600;
    color: var(--navy);
}

.nav__sub a:hover {
    background: rgba(40, 56, 81, 0.06);
}

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

.btn {
    display: inline-block;
    border: 0;
    border-radius: 0;
    font-family: var(--sans);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), letter-spacing var(--transition);
}

/* « NOUS JOINDRE » de la barre de contact */
.btn--light {
    padding: 4.8px 16px;
    background: var(--white);
    color: var(--navy);
    font-size: 16px;
    line-height: 1.7em;
}

.btn--light:hover {
    color: var(--navy);
    letter-spacing: 1px;
}

/* « CONTACTEZ-NOUS » du bandeau d'accueil.
   Relevé : 222 × 63 px. La surface vient d'une BORDURE de 11 px de la même
   couleur que le fond, plus 5,4 px de remplissage — et non de 16,2 px de
   remplissage seul, qui donnaient la bonne hauteur mais 22 px de moins en
   largeur. */
.btn--hero {
    padding: 5.4px 18px;
    border: 11px solid var(--white);
    background: var(--white);
    color: var(--navy);
    font-size: 18px;
    line-height: 30.6px;
    text-transform: uppercase;
}

.btn--hero:hover {
    color: var(--navy);
    letter-spacing: 1px;
}

/* « À PROPOS » */
.btn--navy {
    padding: 12px 30px;
    background: var(--navy);
    color: var(--white);
    font-size: 17px;
    font-weight: 600;
    line-height: 28.9px;
    text-transform: uppercase;
}

.btn--navy:hover {
    background: var(--ink-pure);
    color: var(--white);
}


/* --- Menu mobile -------------------------------------------------------- */

.mobile-bar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 100;
    height: 70px;
    background: var(--mobile-bar);
}

.mobile-bar__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.mobile-bar__logo img {
    width: 160px;
    height: 50px;
    object-fit: contain;
}

/* Bouton d'appel, dans les 115 px de barre laissés vides à gauche du logo.
   En position absolue pour ne pas décentrer le logo, que .mobile-bar__inner
   centre en flex. La cible fait 44 × 44 px au minimum — le seuil au doigt —
   et le style porte sur .reveal depuis le conteneur, parce que le script
   remplace le bouton par un <a> qui ne garde que cette classe. */
.mobile-bar__call {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.mobile-bar__call .reveal {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 8px;
    color: var(--white);
    font-family: var(--condensed);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.mobile-bar__call .reveal svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: currentColor;
}

/* Sous 360 px, le logo de 160 px et le bouton du menu ne laissent plus la
   place au mot : l'icône seule, mais la cible garde ses 44 px. */
@media (max-width: 359px) {
    .mobile-bar__call .reveal span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

.mobile-bar__toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--white);
}

.mobile-bar__toggle svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.mobile-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 110;
    width: 270px;
    max-width: 85vw;
    height: 100%;
    padding: 90px 0 40px;
    background: var(--navy);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition);
    visibility: hidden;
}

.mobile-panel[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
}

.mobile-panel__close {
    position: absolute;
    top: 20px;
    right: 14px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--white);
    cursor: pointer;
}

.mobile-panel__close svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.mobile-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-panel li {
    margin: 0;
}

.mobile-panel a {
    display: block;
    padding: 13px 24px;
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-panel a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

.mobile-panel .mobile-panel__sub a {
    padding-left: 42px;
    font-weight: 400;
    font-size: 14px;
}

.mobile-panel__contact {
    padding: 22px 24px 0;
    color: var(--white);
    line-height: 1.8em;
}

.mobile-panel__contact .reveal {
    color: var(--white);
}

/* Le voile est retiré du document quand le menu est fermé (attribut hidden),
   et non simplement rendu invisible : un bouton invisible mais focusable est
   un piège pour la navigation au clavier. */
.mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 105;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity var(--transition);
    border: 0;
    padding: 0;
    cursor: pointer;
}

.mobile-overlay[data-open="true"] {
    opacity: 1;
}

body[data-menu-open="true"] {
    overflow: hidden;
}

/* ==========================================================================
   5. Pied de page
   ========================================================================== */

/* Relevé : section 54px de padding haut, rangée 27px, bas de page 50px + 2/27. */
.footer {
    background: var(--navy);
    color: var(--white);
    padding: 54px 0 0;
}

.footer a {
    color: var(--white);
}

.footer a:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* Quatre colonnes en GRILLE et non en flex. La géométrie de bureau est la
   même qu'avec des largeurs de 20,875 % espacées de 5,5 % — relevé : quatre
   colonnes de 240 px à 1440 px de large — mais elle se réorganise vraiment sur
   petit écran. En flex, les règles `grid-template-columns` des media queries
   plus bas n'avaient aucun effet : le pied gardait quatre colonnes de 73 px à
   390 px, la quatrième seule sur une deuxième rangée. */
.footer__cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--gutter);
    padding: 27px 0 0;
}

/* Relevé : le pied de page affiche le même logo que l'en-tête, à sa taille
   naturelle de 240 × 75. */
.footer__logo img {
    width: 240px;
    height: 75px;
    object-fit: contain;
}

/* Relevé : 22 px / 23,8 px, puis 20 px avant la liste. */
.footer h2 {
    color: var(--white);
    font-size: 22px;
    font-weight: 700;
    line-height: 23.8px;
    padding-bottom: 20px;
}

/* Relevé sur l'original : la liste porte 23 px de retombée sous le dernier
   lien. C'est ce qui fixait la hauteur de la première rangée du pied de page
   (283 px), et donc la hauteur du pied lui-même. */
.footer__menu {
    margin: 0;
    padding: 0 0 23px;
    list-style: none;
    line-height: 26px;
}

/* Relevé : les liens du pied, menu principal comme sous-menu, sont en 16 px. */
.footer__menu a,
.footer__submenu a {
    font-size: 16px;
    line-height: 26px;
}

.footer__menu li {
    margin: 0;
}

.footer__menu .footer__submenu {
    margin: 0;
    padding-left: 16px;
    list-style: none;
}

.footer__contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    line-height: 1.6em;
}

.footer__contact svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin-top: 3px;
    fill: var(--white);
}

.footer__social {
    display: flex;
    gap: 14px;
}

.footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.footer__social svg {
    width: 20px;
    height: 20px;
    fill: var(--white);
}

/* Relevé sur l'original : rangée de 130 px — 2 px de retombée haute, un bloc
   intérieur avec 25 px de respiration au-dessus et au-dessous, deux lignes de
   24 px, puis 27 px de retombée basse. */
.footer__legal {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-top: 50px;
    padding: 2px 0 27px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--condensed);
    /* Relevé : 12 px / 24 px / 700 pour le texte, 16 px / 24 px pour les liens. */
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
}

.footer__legal a {
    font-family: var(--condensed);
    font-size: 16px;
    line-height: 24px;
}

.footer__legal > * {
    padding: 25px 0;
}

.footer__credit {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: right;
}

.footer__credit-text {
    font-family: var(--condensed);
}

.footer__credit-logo {
    display: inline-flex;
    width: 34px;
    height: 34px;
}

.footer__credit-logo svg {
    width: 34px;
    height: 34px;
    fill: var(--white);
}

/* ==========================================================================
   6. Blocs de contenu
   ========================================================================== */

/* --- Bandeau d'accueil -------------------------------------------------
   Relevé : hauteur totale 881 px. Le conteneur du texte fait 800 px de large
   avec 224 px de respiration verticale ; titre 45/54 puis badge de 200 px,
   puis bouton à 34 px.                                                     */

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--navy);
    color: var(--white);
    text-align: center;
}

/* Relevé : background-blend-mode: multiply sur fond bleu nuit. C'est ce qui
   donne au bandeau sa teinte sombre et bleutée. */
.hero .bg-photo {
    mix-blend-mode: multiply;
}

.hero__inner {
    position: relative;
    z-index: 2;
    width: 800px;
    max-width: 88%;
    margin: 0 auto;
    padding: 224px 64px;
}

.hero__title {
    display: block;
    margin: 0;
    padding: 0 0 18px;
    text-wrap: pretty;
    color: var(--white);
    font-size: 45px;
    font-weight: 700;
    line-height: 54px;
}

.hero__badge {
    display: block;
    margin: 0 auto 9px;
    width: 200px;
    height: 200px;
}

.hero .btn--hero {
    margin-top: 34px;
}

/* --- Bandeau d'information --------------------------------------------
   Relevé : section 49 px, rangée 7/3 px et 21 px de marge basse.           */

.infobar {
    padding: 49px 0;
    background: var(--navy);
    color: var(--white);
    text-align: center;
}

.infobar__row {
    padding: 7px 0 3px;
    margin-bottom: 21px;
}

/* Relevé : 18 px / 32,4 px, graisse 600. */
.infobar__title {
    margin: 0;
    padding: 0;
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
    line-height: 32.4px;
}

/* Relevé : la colonne la plus haute (« Des questions ? ») garde 10 px sous son
   dernier paragraphe. C'est elle qui fixe la hauteur du bandeau : sans ces
   10 px, la section faisait 233 px au lieu de 243. */
.infobar__item p:last-child {
    padding-bottom: 0;
    margin-bottom: 10px;
}

.infobar__reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.infobar__social {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

.infobar__social svg {
    width: 22px;
    height: 22px;
    fill: var(--white);
}

/* --- Trois cartes de prestation ---------------------------------------
   Relevé : section 180 px en haut, rangée remontée de 80 px, colonnes
   60/30 px, icône de 40 px suivie de 30 px, titre 22/22.                   */

.service-cards {
    position: relative;
    z-index: 2;
    padding: 180px 0 0;
    background: var(--white);
}

.service-cards__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* Relevé : l'original pose ici une photo en parallaxe, calée en haut de son
   bloc de fond. La fenêtre visible parcourt la photo de 0-402 px (section en
   haut de l'écran) à 180-582 px (section entrant par le bas) — mesuré à cinq
   positions de défilement. Le nouveau site ne reprend pas le mouvement : la
   photo est figée au MILIEU de ce parcours, soit 90-492 px
   sur les 810 px de la photo affichée, d'où 90/408 = 22 %.
   Un cadrage centré (50 %) montrait 204-606 px, une zone que l'original
   n'atteint jamais. */
.service-cards__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}

.service-cards__row {
    position: relative;
    z-index: 2;
    margin-bottom: -80px;
}

.service-card {
    background: var(--navy);
    color: var(--white);
    padding: 60px 30px;
    text-align: center;
}

.service-card svg {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 30px;
    fill: var(--white);
}

/* p.… et non .… : « p:last-child { padding-bottom: 0 } » plus haut a une
   spécificité supérieure à une simple classe et gagnait la retombée de 10 px,
   celle qui donne au bandeau ses 402 px. */
p.service-card__label {
    margin: 0;
    color: var(--white);
    font-size: 22px;
    line-height: 22px;
    font-weight: 700;
    padding-bottom: 10px;
}

/* --- Texte courant ------------------------------------------------------
   Relevé : section 139 px + rangée 27 px en haut.                          */

.prose-section {
    padding: 166px 0 0;
}

/* Relevé : les modules de texte de l'original composent en 15 px / 27 px, et
   leurs listes en 15 px / 26 px. Le corps de page, lui, reste en 14 px. */
.prose {
    color: var(--ink-pure);
    font-size: 15px;
    line-height: 27px;
}

.prose li {
    line-height: 26px;
}

/* Relevé : les pages légales sont composées en 14 px / 23,8 px — seules les
   pages de présentation passent en 15 px / 27 px. */
.prose.legal {
    font-size: 14px;
    line-height: 23.8px;
}

.prose.legal li {
    line-height: 23.8px;
}

.prose h1 {
    padding-bottom: 10px;
}

.prose h2 {
    padding-bottom: 10px;
}

.prose a {
    color: var(--navy);
}

.prose a:hover {
    color: var(--ink);
}

.prose .u {
    text-decoration: underline;
}

/* L'image prolonge la rangée du texte : 27 px de bas de rangée, rien d'autre. */
.block-image {
    padding: 0 0 27px;
}

.block-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Deux colonnes ------------------------------------------------------
   Accueil  : rangée 17 px de marge + 16/27 px, puis 50 px de bas de section.
   Services : section 81/80 px et rangée 16/27 px.                          */

.two-col {
    padding: 33px 0 77px;
}

.two-col--gap-top {
    padding: 97px 0 107px;
}

.two-col__media {
    display: block;
    margin-bottom: 29.69px;
}

.two-col__media img {
    display: block;
    width: 100%;
    height: auto;
}

.two-col__media--after {
    margin: 29.69px 0 0;
}


/* --- Bandeau de cinq photos légendées ---------------------------------
   Relevé : section 69 px, tuiles de 460 px avec 230 px de retrait haut,
   légende 18/27 en capitales, 30 px sous la rangée.                        */

.photo-tiles {
    padding: 69px 0;
    background: var(--navy);
}

/* Relevé : les cinq tuiles occupent 87 → 1352,9 px dans une rangée de 1296 px
   qui commence à 72 — soit 15 px de retrait de chaque côté. Sans ce retrait
   les tuiles faisaient 228,8 px au lieu de 222,8 et la légende se repliait
   d'une ligne de plus. */
.photo-tiles__row {
    padding: 0 15px 30px;
}

/* Relevé : la légende est calée en BAS, son pied à 40 px du bas de la tuile —
   les cinq légendes de l'original partagent ce bas et non leur haut, quel que
   soit leur nombre de lignes. Le texte est composé sur 182,8 px, d'où 20 px de
   retrait latéral. */
.photo-tile {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 460px;
    padding: 230px 20px 40px;
    color: var(--white);
    text-align: center;
}

/* Les légendes sont blanches sur photo : sur la tuile la plus claire, le
   contraste mesuré tombe à 3,8:1, sous les 4,5:1 attendus pour ce corps. Une
   ombre portée discrète le rétablit sans changer la couleur ni la taille, et
   ne se voit pas sur les tuiles sombres. */
.photo-tile__caption {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    position: relative;
    z-index: 2;
    width: 100%;
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    text-transform: uppercase;
}

.photo-tile__caption p {
    padding-bottom: 0;
}

/* --- Image et texte côte à côte ---------------------------------------
   Gouttière étroite (3 %), proportions 3/5 – 2/5, texte décalé de 200 px.   */

.feature-split__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.feature-split__media {
    position: relative;
    z-index: 1;
    position: relative;
    overflow: hidden;
    width: 58.8%;
    margin-right: var(--gutter-narrow);
}

.feature-split__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-split__body {
    width: 38.2%;
    padding-top: 200px;
}

/* Relevé : 23 px / 29,9 px en #232323 — les autres H2 du site sont en 26 px. */
.feature-split__body h2 {
    color: var(--ink);
    font-size: 23px;
    line-height: 29.9px;
}

/* Relevé sur les trois occurrences du site : le titre et le texte sont deux
   panneaux BLANCS de 553 px — la colonne fait 413 px, ils débordent donc de
   140 px du côté de la photo, qu'ils recouvrent. Le premier porte 50 px de
   respiration haute et remonte de 66 px ; le second descend de 19 px sous lui.
   Sans ces panneaux, la photo restait entière et le texte flottait dans une
   colonne étroite. */
.feature-split__body > h2,
.feature-split__body > .prose {
    position: relative;
    z-index: 2;
    width: calc(100% + 140px);
    margin-left: -140px;
    background: var(--white);
}

.feature-split__body > h2 {
    padding: 50px 0 10px 50px;
    margin-top: -66px;
    margin-bottom: 16.19px;
}

.feature-split__body > .prose {
    padding: 20px 0 50px 50px;
    margin-top: -19px;
    margin-bottom: -20px;
}

/* Sur l'accueil, le panneau de texte réserve 132 px en bas pour le bouton, qui
   remonte de 116 px dedans. */
.feature-split--about .feature-split__body > .prose {
    padding-bottom: 132px;
    margin-bottom: 16.19px;
}

/* Le bouton remonte de 116 px dans la réserve du panneau : il faut un bloc
   pour que la marge négative agisse (sur un inline-block, elle ne déplace rien). */
.feature-split--about .feature-split__body .btn {
    position: relative;
    z-index: 3;
    display: block;
    width: max-content;
    margin: -116px 0 0 -90px;
}

/* Variante photo à droite : les panneaux débordent vers la droite. */
.feature-split--reverse .feature-split__body > h2,
.feature-split--reverse .feature-split__body > .prose {
    margin-left: 0;
    margin-right: -140px;
}

.feature-split__body .btn {
    margin-top: 10px;
}

.feature-split--reverse .feature-split__row {
    flex-direction: row-reverse;
}

.feature-split--reverse .feature-split__media {
    margin-right: 0;
    margin-left: var(--gutter-narrow);
}

/* Trois respirations distinctes, relevées page par page. */
.feature-split--about {
    padding: 78px 0 56px;
}

.feature-split--stack-first {
    padding: 107px 0 27px;
}

.feature-split--stack-last {
    padding: 107px 0 107px;
}

/* --- Bandeau bleu nuit pleine largeur ---------------------------------
   Relevé : hauteur 548 px, photo 48,5 %, texte 35,4 % avec 80 px de
   respiration, et le bleu qui continue à droite du texte.                  */

.dark-split {
    padding: 0;
    background: var(--navy);
    color: var(--white);
}

.dark-split__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.dark-split__media {
    position: relative;
    width: 48.5%;
    min-height: 548px;
    overflow: hidden;
}

.dark-split__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dark-split__body {
    width: 35.4%;
    margin-left: var(--gutter-narrow);
    padding: 80px 0;
    color: var(--white);
    font-size: 15px;
    line-height: 27px;
}

/* Relevé : 26 px / 33,8 px. */
.dark-split__body h2 {
    color: var(--white);
    line-height: 33.8px;
}

.dark-split__body a {
    color: var(--white);
    text-decoration: underline;
}

/* --- Galerie ------------------------------------------------------------
   Relevé : 4 colonnes, vignettes de 270 × 192 avec 2 px de gouttière.       */

.gallery-section {
    padding: 81px 0 80px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.gallery__item {
    display: block;
    position: relative;
    line-height: 0;
    overflow: hidden;
    background: var(--navy);
}

.gallery__item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 268 / 190;
    object-fit: cover;
    transition: transform var(--transition), opacity var(--transition);
}

.gallery__item:hover img {
    transform: scale(1.04);
    opacity: 0.85;
}

.lightbox {
    border: 0;
    padding: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
}

.lightbox::backdrop {
    background: rgba(0, 0, 0, 0.92);
}

.lightbox__figure {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 40px 60px;
}

.lightbox__figure img {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    width: auto;
    object-fit: contain;
}

.lightbox__figure figcaption {
    color: var(--white);
    font-size: 14px;
    text-align: center;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    background: none;
    border: 0;
    color: var(--white);
    cursor: pointer;
    padding: 12px;
    line-height: 0;
}

.lightbox__close {
    top: 12px;
    right: 16px;
}

.lightbox__prev {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox__next {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

/* --- En-tête de page intérieure ---------------------------------------
   Relevé : section 60 px + rangée 27 px.                                   */

.page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 87px 0;
    background: var(--navy);
    color: var(--white);
}

/* Relevé : photo et dégradé sont tous deux multipliés sur le bleu nuit.
   Le dégradé descend jusqu'à 100 % sur la plupart des pages, 73 % sur la
   page Réparation.
   —
   ÉCART ASSUMÉ avec l'original, et le seul de cette feuille : le premier
   arrêt du dégradé part de rgba(40, 56, 81, .65) au lieu de transparent.
   Motif mesuré, texte du titre rendu réellement transparent pour ne relever
   que le fond derrière lui :

     page Réparation, titre blanc sur le corps gris clair du portable
       avant : 1,24:1 au pire à 360 px, 80,1 % de la surface du titre sous 3:1
               1,26:1 à 390 px (75,5 %) ; 1,66:1 à 1440 px (7,5 %)
       après : 4,67:1 au pire à 360 et 390 px, 5,40:1 à 1440,
               0,0 % de surface sous 4,5:1 sur les quatre en-têtes de page

   Le titre est en HAUT du bandeau, or le dégradé ne devenait bleu nuit qu'à
   73 % de la hauteur : il ne protégeait rien là où le texte se trouve. La
   valeur .55, d'abord proposée, passe le seuil « grand texte » mais laisse
   41 % du titre sous 4,5:1 ; .65 coûte exactement la même chose et ferme le
   défaut. Le voile est en position absolue : aucune hauteur ne bouge.

   Piège de vérification : la CSP du site interdit le style en ligne, donc
   toute injection de <style> depuis un navigateur piloté est bloquée EN
   SILENCE. Une mesure faite sans page.setBypassCSP(true) relève les pixels
   du texte blanc comme s'ils étaient le fond et donne un faux 1,4:1 sur
   n'importe quel texte clair. */
.page-hero__veil {
    mix-blend-mode: multiply;
}

.page-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(rgba(40, 56, 81, 0.65) 0%, var(--navy) 100%);
    pointer-events: none;
}

.page-hero--veil73 .page-hero__veil {
    background: linear-gradient(rgba(40, 56, 81, 0.65) 0%, var(--navy) 73%);
}

.page-hero__inner {
    position: relative;
    z-index: 2;
}

.page-hero h1 {
    color: var(--white);
    padding-bottom: 10px;
}

.page-hero--prose h1 {
    padding-bottom: 16px;
}

.page-hero__body {
    color: var(--white);
    font-size: 15px;
    line-height: 27px;
}

.page-hero__body a {
    color: var(--white);
    text-decoration: underline;
}

.page-hero__body strong {
    color: var(--white);
}

/* --- Plan du site -------------------------------------------------------
   Relevé : section 110 px, encart blanc avec 60 px de retrait.              */

.sitemap-section {
    padding: 110px 0;
    background: var(--grey-bg);
}

.sitemap__title {
    padding-bottom: 26px;
}

/* Une seule colonne depuis le 11 septembre 2026 : la seconde présentait
   sitemap.xml et robots.txt, qui s'adressent aux moteurs, pas au visiteur. */
.sitemap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    background: var(--white);
    padding: 60px;
}

.sitemap h2 {
    color: var(--ink);
    font-size: 26px;
    font-weight: 500;
    line-height: 26px;
    padding-bottom: 14px;
}

/* Relevé sur l'original : les liens du plan du site sont en 14 px / 26 px,
   graisse 500, bleu nuit. Les deux commentaires qui décrivaient ici les titres
   d'articles et un intitulé de catégorie en graisse 700 n'ont plus d'objet :
   la colonne des articles a disparu avec eux. */
.sitemap a {
    color: var(--navy);
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
}

.sitemap ul {
    padding-left: 1.2em;
}

/* La colonne de gauche liste les pages, celle de droite les fichiers destinés
   aux moteurs. Sans articles, les deux colonnes de la grille suffisent. */
.sitemap li {
    margin-bottom: 0.35em;
}

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

/* Relevé : section de 110 px de respiration, colonne avec 60 px de retrait —
   le texte est donc composé sur 960 px et non sur les 1080 px de la rangée —
   et texte en #232323 et non en noir comme le reste du contenu éditorial. */
.legal-section {
    padding: 110px 0;
}

.prose.legal {
    padding: 60px;
    color: var(--ink);
}

/* L'original marquait ces intitulés par un style en ligne
   (<p style="font-weight:bold">), interdit par la politique de sécurité du
   nouveau site : ils portent donc une classe. */
.legal__strong {
    font-weight: 700;
}

.legal h1 {
    padding-bottom: 24px;
}

/* Relevé sur l'original, page par page : les titres des pages légales sont
   composés sans respiration haute, taille = interligne, 10 px de retombée,
   graisse 500, en #232323 — 26, 22, 18 puis 16 px. Mes valeurs précédentes
   (22 px avec 24 px de respiration haute, etc.) ajoutaient 27 px par titre,
   soit 446 px sur la politique de confidentialité, qui en compte seize. */
.legal h2 {
    padding: 0 0 10px;
    font-size: 26px;
    font-weight: 500;
    line-height: 26px;
    color: var(--ink);
}

.legal h3 {
    padding: 0 0 10px;
    font-size: 22px;
    font-weight: 500;
    line-height: 22px;
    color: var(--ink);
}

.legal h4 {
    padding: 0 0 10px;
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    color: var(--ink);
}

.legal h5 {
    padding: 0 0 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    color: var(--ink);
}

/* Relevé : tableaux sur toute la largeur, 14 px, 15 px de marge basse ;
   cellules à 6 px de remplissage. */
.legal table {
    width: 100%;
    font-size: 14px;
    margin-bottom: 15px;
}

.legal li {
    line-height: 26px;
}

/* Relevé : dans l’original ces liens sont bleu nuit et NON soulignés, comme
   le reste du texte courant. Seule la coupure des URL longues est conservée. */
.legal a {
    word-break: break-word;
}

/* Les tableaux de cookies défilent dans leur conteneur : sur le site
   d'origine ils faisaient déborder toute la page en mobile. */
.legal .table-scroll {
    overflow-x: auto;
    margin: 0 0 1.4em;
    -webkit-overflow-scrolling: touch;
}

.legal table {
    border-collapse: collapse;
    min-width: 560px;
    font-size: 13px;
}

.legal table td,
.legal table th {
    padding: 6px;
    border: 1px solid var(--ink-pure);
    text-align: left;
    vertical-align: top;
}


/* --- Appel à l'action de fin de page (Réparation, Matériel) ---------------
   Fond teinté du bleu nuit à 6 %, comme les encadrés du site : un bandeau
   bleu nuit plein se serait fondu dans le pied de page qui le suit. Bouton
   bleu nuit du site, et un lien souligné vers l'autre page de services. */

.cta {
    padding: 0 0 80px;
}

.cta__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 48px;
    padding: 36px 44px;
    background: rgba(40, 56, 81, 0.06);
}

.cta__text {
    flex: 1 1 420px;
}

.cta__text p {
    margin: 0;
}

.cta__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.cta__link {
    margin: 0;
}

.cta__link a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cta__link a:hover {
    color: var(--ink);
}

@media (max-width: 980px) {
    .cta {
        padding-bottom: 50px;
    }

    .cta__panel {
        padding: 28px 24px;
    }
}

/* ==========================================================================
   7. Formulaire
   ========================================================================== */

/* Relevé : section 80 px, encart blanc de 1080 px, colonne du formulaire
   720 px et panneau 360 px, tous deux à 60 px de retrait, sans gouttière.   */

.contact-section {
    padding: 80px 0;
}

.contact-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: var(--white);
}

.contact-grid__form {
    width: 66.667%;
    padding: 60px;
    background: var(--white);
}

.contact-grid__panel {
    width: 33.333%;
    padding: 60px;
    background: var(--navy);
    color: var(--white);
}

.contact-heading {
    color: var(--ink-pure);
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
    padding-bottom: 10px;
}

/* Relevé : 20 px / 20 px avec 10 px de retombée — le bloc fait 30 px. */
.panel-heading {
    color: var(--white);
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    padding-bottom: 10px;
}

.panel-item {
    display: flex;
    gap: 16px;
    margin-bottom: 26px;
}

.panel-item svg {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    fill: var(--white);
    margin-top: 2px;
}

.panel-item h4 {
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 4px;
}

.panel-item p {
    padding-bottom: 0;
}

.panel-item .reveal {
    color: var(--white);
}

/* --- Champs -------------------------------------------------------------
   Le formulaire d'origine n'affichait que des textes indicatifs. On garde
   des étiquettes réelles pour les lecteurs d'écran, masquées à l'écran :
   même rendu, formulaire accessible.                                       */

/* Relevé : 30 px sous le titre, et 18,5 px entre les champs. */
.form {
    padding-top: 30px;
}

.form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18.53px;
}

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

.form__field--full {
    grid-column: 1 / -1;
}

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

.form__input,
.form__textarea {
    width: 100%;
    padding: 16px;
    background: transparent;
    /* Le gris d'origine (#c9c9c9) tombait à 1,66:1 sur blanc : la limite du
       champ n'était pas perceptible. Assombri pour atteindre 3:1. */
    border: 1px solid var(--field-border);
    border-radius: 0;
    color: var(--ink-pure);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6em;
}

.form__textarea {
    min-height: 130px;
    resize: vertical;
}

.form__input:focus,
.form__textarea:focus {
    outline: 2px solid var(--navy);
    outline-offset: -1px;
    border-color: var(--navy);
}

.form__input[aria-invalid="true"],
.form__textarea[aria-invalid="true"] {
    border-color: var(--error);
}

.form__error {
    color: var(--error);
    font-size: 13px;
    padding: 4px 0 0;
}

/* Relevé sur l'original : le champ de consentement fait 103 px — un intitulé
   « Confidentialité » de 24 px en 14 px/23,8 px/600 avec 7 px de retombée, puis
   le texte long en 15 px/24 px/300 sur toute la largeur (599 px, trois lignes).
   La respiration au-dessus vient de la gouttière de la grille, pas d'un
   remplissage propre au champ. */
.form__consent {
    grid-column: 1 / -1;
}

.form__consent-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 23.8px;
    color: var(--ink);
    margin-bottom: 7px;
}

/* La case flotte, comme dans l'original où elle est posée dans le fil du
   texte : les lignes suivantes reprennent donc toute la largeur au lieu d'être
   décalées, ce qui économisait une ligne de repli. */
.form__check {
    line-height: 1.5em;
}

.form__check input {
    float: left;
    width: 16px;
    height: 16px;
    margin: 4px 10px 0 0;
    accent-color: var(--navy);
}

.form__check label {
    display: block;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

/* Relevé : 15 px / 24 px / 300 en noir. */
.form__check-detail {
    font-size: 15px;
    font-weight: 300;
    line-height: 24px;
    color: var(--ink-pure);
    display: block;
    padding-top: 2px;
}

/* Règle du « téléphone OU e-mail », écrite au-dessus du champ plutôt que
   découverte par un message d'erreur. Graisse 400 et non 300 : c'est une
   consigne, elle doit se lire du premier coup — le texte à 300 était la
   graisse la plus fine du site. */
.form__hint {
    margin: 0;
    padding: 0 0 18px;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: var(--ink);
}

.form__check a {
    text-decoration: underline;
}

/* Relevé sur l'original : le bouton suit la case de consentement sans
   respiration supplémentaire — la gouttière de la grille suffit. */
.form__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

/* Le bouton d'origine porte une bordure de 12 px de la même couleur que
   le fond : c'est ce qui lui donne sa surface. */
.form__submit {
    padding: 4.2px 14px;
    background: var(--ink-pure);
    border: 12px solid var(--ink-pure);
    color: var(--white);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 23.8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: letter-spacing var(--transition);
}

.form__submit:hover {
    letter-spacing: 2px;
}

/* Champ leurre : invisible pour un humain, atteignable pour un robot. */
.form__decoy {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.notice {
    padding: 16px 20px;
    margin-bottom: 24px;
    border-left: 3px solid var(--navy);
    background: rgba(40, 56, 81, 0.06);
    line-height: 1.6em;
}

.notice--ok {
    border-left-color: var(--ok);
    background: rgba(31, 99, 73, 0.08);
}

.notice--error {
    border-left-color: var(--error);
    background: rgba(163, 43, 34, 0.07);
}

.notice p:last-child {
    padding-bottom: 0;
}

/* ==========================================================================
   8. Utilitaires
   ========================================================================== */

/* Bouton de révélation du téléphone et de l'e-mail. */
.reveal {
    display: inline;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: opacity var(--transition);
}

.reveal:hover {
    opacity: 0.75;
    text-decoration: underline;
}

.reveal[data-state="loading"] {
    opacity: 0.6;
    cursor: progress;
}

.reveal[data-state="done"] {
    cursor: default;
    text-decoration: none;
}

.reveal[data-state="done"]:hover {
    opacity: 1;
}

.u {
    text-decoration: underline;
}

.lead-title {
    font-size: 20px;
    font-weight: 700;
}

.error-page {
    padding: 120px 0 140px;
    text-align: center;
}

.error-page h1 {
    padding-bottom: 18px;
}

.error-page p {
    max-width: 52ch;
    margin: 0 auto;
    padding-bottom: 1.4em;
}

/* flex-wrap : sans lui, les deux boutons dépassaient la gouttière de 13 px de
   chaque côté à 320 px et leur texte se repliait sur trois lignes. */
.error-page__actions {
    flex-wrap: wrap;
    display: flex;
    gap: 14px;
    justify-content: center;
    padding-top: 10px;
}

/* ==========================================================================
   9. Mobile — Divi bascule à 980 px, on reprend cette rupture
   ========================================================================== */

@media (max-width: 980px) {
    .topbar,
    .masthead {
        display: none;
    }

    .mobile-bar {
        display: block;
    }

    .cols > *,
    .cols--2 > *,
    .cols--3 > *,
    .cols--4 > *,
    .cols--5 > * {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .cols > *:last-child {
        margin-bottom: 0;
    }

    /* Le titre de 45 px cassait en plein mot sur le site d'origine. */
    .hero__title {
        font-size: clamp(28px, 8.6vw, 45px);
        line-height: 1.2em;
    }

    .hero__inner {
        width: 88%;
        padding: 90px 0;
    }

    .hero__badge {
        width: 160px;
        height: 160px;
    }

    /* Relevé à 390 px : l'original compose les titres de PAGE en 25 px / 32,5 px
       et laisse les H2 à leurs 26 px de grand écran. Seul le titre d'ARTICLE
       garde ses 40 px. Les valeurs précédentes (30 px et 22 px) inversaient le
       rapport entre les deux niveaux. */
    h1 {
        font-size: 25px;
        line-height: 32.5px;
    }

    .page-hero {
        padding: 60px 0;
    }

    .prose-section {
        padding: 60px 0 0;
    }

    .service-cards {
        padding: 80px 0 0;
    }

    .service-cards__row {
        margin-bottom: -40px;
    }

    .service-card {
        padding: 40px 24px;
    }

    .photo-tiles {
        padding: 50px 0;
    }

    .photo-tile {
        min-height: 260px;
        padding: 120px 30px 30px;
    }

    .two-col {
        padding: 40px 0 50px;
    }

    .two-col--gap-top {
        padding: 50px 0 50px;
    }

    .feature-split--about,
    .feature-split--stack-first,
    .feature-split--stack-last {
        padding: 50px 0;
    }

    .feature-split__row,
    .feature-split--reverse .feature-split__row,
    .dark-split__row,
    .contact-grid {
        flex-direction: column;
    }

    .feature-split__media,
    .feature-split__body,
    .feature-split--reverse .feature-split__media,
    .dark-split__media,
    .dark-split__body,
    .contact-grid__form,
    .contact-grid__panel {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    /* Sur mobile, le panneau « NOUS JOINDRE » passe DEVANT le formulaire.
       Relevé avant : à 390 px, le bouton « Voir le numéro » tombait à
       1 513 px du haut — soit 1,8 écran, derrière cinq champs et une case de
       consentement — alors que sur bureau il est à 762 px, dans le premier
       écran. Le bureau avait donc le bon ordre et le mobile l'inverse : celui
       qui préférait téléphoner devait franchir exactement ce qu'il voulait
       éviter. Une propriété, et il remonte vers 450 px. La colonne de droite
       du bureau n'est pas touchée : la comparaison au pixel avec l'original y
       reste valable. */
    .contact-grid__panel {
        order: -1;
    }

    /* Les deux panneaux blancs ne débordent plus vers la photo : elle est
       maintenant au-dessus d'eux, et leur débordement de 140 px sortait de
       l'écran. */
    .feature-split__body > h2,
    .feature-split__body > .prose,
    .feature-split--reverse .feature-split__body > h2,
    .feature-split--reverse .feature-split__body > .prose {
        width: auto;
        margin: 0;
        padding: 24px 24px 0;
    }

    .feature-split__body > .prose,
    .feature-split--about .feature-split__body > .prose {
        padding: 0 24px 24px;
        margin-bottom: 0;
    }

    .feature-split--about .feature-split__body .btn {
        margin: 0 24px 0;
    }

    .feature-split__media,
    .dark-split__media {
        min-height: 280px;
    }

    .feature-split__body {
        padding-top: 30px;
    }

    .dark-split__body {
        padding: 50px 0;
    }

    .contact-section {
        padding: 50px 0;
    }

    .contact-grid__form,
    .contact-grid__panel {
        padding: 34px 24px;
    }

    .contact-heading {
        font-size: 24px;
    }

    .gallery-section {
        padding: 50px 0;
    }

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

    .sitemap {
        grid-template-columns: 1fr;
        padding: 34px 24px;
    }

    .sitemap-section {
        padding: 60px 0;
    }

    .legal-section {
        padding: 50px 0;
    }

    /* Relevé sur l'original : 40 px en haut et en bas, 20 px sur les côtés —
       et non les 60 px du grand écran, qui ne laissaient que 192 px de texte. */
    .prose.legal {
        padding: 40px 20px;
    }

    

    /* Relevé : 10 px de retombée, et non 16. */
    .page-hero h1,
    .page-hero__inner h1 {
        padding-bottom: 10px;
    }

    .footer {
        padding-top: 40px;
    }

    .footer__cols {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
    }

    /* la gouttière est portée par la grille : plus de marge sur les enfants */
    .footer__cols > * {
        margin-right: 0;
    }

    .footer__legal {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 34px;
    }

    .footer__credit {
        text-align: left;
    }

    .form__actions {
        justify-content: stretch;
    }

    .form__submit {
        width: 100%;
    }
}

@media (max-width: 640px) {

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

    .footer__cols {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .form__grid {
        grid-template-columns: 1fr;
    }

    .lightbox__figure {
        padding: 60px 16px 30px;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .topbar,
    .masthead,
    .mobile-bar,
    .mobile-panel,
    .mobile-overlay,
    .footer__social,
    .lightbox {
        display: none !important;
    }

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

    a {
        text-decoration: underline;
    }
}