/* ==========================================================================
   style.css — Mise en forme du site migliore06.fr
   --------------------------------------------------------------------------
   Ce fichier décrit l'apparence de chaque élément du site.
   Il n'écrit JAMAIS de couleur ni de police « en dur » : il utilise
   uniquement les variables de variables.css, sous la forme var(--nom).

   Sommaire :
     1. Bases communes à tout le site
     2. Bandeau du haut (inc/header.php)
     3. Pied de page (inc/footer.php)
     4. Pages de texte (mentions légales…)
     5. Page Contact (formulaire, coordonnées, carte)
     6. Page d'accueil (carrousel…)
     7. Adaptation aux écrans plus petits (tablettes, téléphones)
   ========================================================================== */


/* ==========================================================================
   1. BASES COMMUNES À TOUT LE SITE
   ========================================================================== */

/* Les dimensions d'un élément incluent ses marges intérieures et sa bordure
   (calculs de largeur beaucoup plus simples et prévisibles). */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Page entière : fond, police et couleur du texte courant. */
/* Taille de base de tout le site : 16 px, puis proportionnelle à la largeur
   de l'écran au-delà de --largeur-reference-ecran (voir variables.css). */
html {
    font-size: clamp(16px, calc(100vw * 16 / var(--largeur-reference-ecran)), var(--taille-base-maximale));
}

body {
    margin: 0;
    background-color: var(--couleur-fond-page);
    color: var(--couleur-anthracite);
    font-family: var(--police-principale);
    font-size: var(--taille-texte-normal);
    line-height: var(--hauteur-ligne-texte);

    /* La page occupe au moins toute la hauteur de l'écran, et le contenu
       (<main>) s'étire : le pied de page reste ainsi toujours en bas,
       même quand la page est courte. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* Les images ne débordent jamais de leur conteneur. */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Liens : bleu moyen, sans soulignement ; bleu logo au survol. */
a {
    color: var(--couleur-bleu-moyen);
    text-decoration: none;
    transition: color var(--duree-transition);
}

a:hover {
    color: var(--couleur-bleu-logo);
}

/* Contour bien visible autour de l'élément sélectionné au clavier
   (touche Tab) : indispensable pour les personnes qui n'utilisent pas
   de souris. */
:focus-visible {
    outline: var(--epaisseur-soulignement) solid var(--couleur-bleu-moyen);
    outline-offset: 3px;
}

/* Lien « Aller au contenu » : caché hors de l'écran, il apparaît
   en haut à gauche seulement quand on l'atteint avec la touche Tab. */
.lien-acces-contenu {
    position: absolute;
    left: var(--espace-moyen);
    top: -100px;
    z-index: 100;
    padding: var(--espace-petit) var(--espace-moyen);
    background-color: var(--couleur-bleu-fonce);
    color: var(--couleur-blanc);
    border-radius: var(--arrondi-petit);
}

.lien-acces-contenu:focus {
    top: var(--espace-moyen);
    color: var(--couleur-blanc);
}



/* ==========================================================================
   2. BANDEAU DU HAUT (inc/header.php)
   Reproduction fidèle du bandeau de l'ancien site migliore06.fr.
   ========================================================================== */

/* Le bandeau entier occupe 85 % de la largeur de l'écran, centré.
   Les bandes bleues ont donc la même largeur que le contenu. */
.bandeau-haut {
    width: var(--largeur-bandeau-haut);
    margin: var(--espace-petit) auto 0;
}


/* --- 2.1 Zone claire : grille logos / titre / sous-titre / slogan ----- */

/* La zone est découpée en une grille de 3 colonnes et 3 lignes :

        colonne 1    colonne 2 (centre)    colonne 3
   1    logo NCM     titre                 logo UTAC
   2    (suite)      sous-titre            (suite)
   3    (suite)      slogan                (suite)

   - les logos sont collés aux bords de la bande (aucune marge latérale) ;
   - les colonnes 1 et 3 ont la même largeur : le titre est exactement au
     centre, aligné avec le nom de l'entreprise dans le pied de page.
   Le menu n'est pas ici : il est dans la bande bleue épaisse (2.2). */
.zone-identite {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    grid-template-areas:
        "ncm  titre      utac"
        "ncm  soustitre  utac"
        "ncm  slogan     utac";
    align-items: center;
    column-gap: var(--espace-moyen);
    row-gap: 0;
    padding: var(--espace-petit) 0;
}

/* « Nouvelle Carrosserie Migliore » : TOUJOURS en Impact, TOUJOURS en bleu
   #0000FF (règle de la charte graphique). */
.titre-entreprise {
    grid-area: titre;
    text-align: center;
    font-family: var(--police-titre-entreprise);
    font-size: var(--taille-titre-entreprise);
    font-weight: var(--epaisseur-normale);   /* Impact est déjà très épaisse */
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-bleu-logo);
}

/* Le titre reste bleu logo au survol de la souris. */
.titre-entreprise:hover {
    color: var(--couleur-bleu-logo);
}

/* « - Carrossier Constructeur - » : Impact, bleu éclairci. */
.sous-titre-entreprise {
    grid-area: soustitre;
    margin: 0;
    text-align: center;
    font-family: var(--police-titre-entreprise);
    font-size: var(--taille-sous-titre-entreprise);
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-bleu-logo-clair);
}

/* Slogan : police principale, en gras, centré sous le titre. */
.slogan {
    grid-area: slogan;
    margin: var(--espace-tres-petit) 0 0;
    text-align: center;
    font-family: var(--police-principale);
    font-size: var(--taille-slogan);
    font-weight: var(--epaisseur-grasse);
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-anthracite);
}

/* Logo NCM, à l'extrême gauche. */
.logo-ncm {
    grid-area: ncm;
    justify-self: start;
}

.logo-ncm img {
    height: var(--hauteur-logo-ncm);
    width: auto;
}

/* Bloc UTAC, à l'extrême droite : le logo, et en dessous les domaines
   certifiés. */
.certification-utac {
    grid-area: utac;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espace-tres-petit);
}

.certification-utac img {
    height: var(--hauteur-logo-utac);
    width: auto;
}

/* Mention des domaines certifiés, sur deux lignes centrées :
   « Certifié » puis « PL, VUL, Aménageur ». */
.certification-utac-texte {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--taille-texte-petit);
    font-weight: var(--epaisseur-semi-grasse);
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-bleu-fonce);
}


/* --- 2.2 Bande bleue épaisse : contient le menu ---------------------- */

/* La bande sépare la présentation de l'entreprise du contenu de la page.
   Le menu y est écrit en blanc, centré. */
.bande-bleue-epaisse {
    min-height: var(--hauteur-bande-bleue-epaisse);
    background-color: var(--couleur-bleu-logo);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Liens du menu alignés à l'horizontale, centrés. */
.menu-principal-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--espace-grand);
    align-items: center;   /* liens sur une ligne centrés face aux liens sur deux lignes */
}

/* Chaque lien (et le bouton du menu déroulant) : police principale, en
   blanc. Un petit trait (transparent par défaut) est prévu sous chaque lien. */
.menu-principal-liste a,
.menu-deroulant-bouton {
    display: block;
    padding: var(--espace-tres-petit) var(--espace-petit) var(--espace-minuscule);
    font-family: var(--police-principale);
    font-size: var(--taille-menu);
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-blanc);
    border-bottom: var(--epaisseur-trait-menu) solid transparent;
    transition: border-color var(--duree-transition);
}

/* Lien « Accueil » : petite maison dessinée (même couleur que le texte du
   menu, un peu plus haute que les lettres pour être bien reconnaissable). */
.icone-accueil {
    display: block;
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
}

/* Au survol de la souris : le petit trait apparaît en bleu clair. */
.menu-principal-liste a:hover,
.menu-deroulant-bouton:hover {
    color: var(--couleur-blanc);
    border-bottom-color: var(--couleur-bleu-logo-clair);
}

/* Page en cours : petit trait blanc sous le lien. */
.menu-principal-liste a.lien-actif,
.menu-deroulant-bouton.lien-actif {
    border-bottom-color: var(--couleur-blanc);
}

/* Contour de sélection au clavier en blanc (le bleu serait invisible
   sur la bande bleue). */
.menu-principal-liste a:focus-visible,
.menu-deroulant-bouton:focus-visible {
    outline-color: var(--couleur-blanc);
}

/* --- Menu déroulant « Nos aménagements » ---------------------------- */

.menu-deroulant {
    position: relative;   /* la liste se place juste sous le bouton */
}

/* Le bouton ressemble aux autres liens du menu (pas d'aspect « bouton »). */
.menu-deroulant-bouton {
    background: none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    cursor: pointer;
}

/* Petite flèche ▾, qui se retourne quand la liste est ouverte. */
.menu-deroulant-fleche {
    display: inline-block;
    font-size: 0.75em;
    transition: transform var(--duree-transition);
}

.menu-deroulant-bouton[aria-expanded="true"] .menu-deroulant-fleche {
    transform: rotate(180deg);
}

/* La liste : carte blanche sous le bouton, cachée par défaut. */
.menu-deroulant-liste {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;   /* au-dessus du carrousel */
    min-width: 13rem;
    margin: 0;
    padding: var(--espace-tres-petit) 0;
    list-style: none;
    background-color: var(--couleur-blanc);
    border: var(--epaisseur-bordure) solid var(--couleur-gris-bordure);
    border-top: var(--epaisseur-trait-menu) solid var(--couleur-bleu-logo);
    border-radius: 0 0 var(--arrondi-moyen) var(--arrondi-moyen);
    box-shadow: var(--ombre-carte-survol);
}

/* Ouverte : au survol de la souris (ordinateur), ou après un toucher /
   clic sur le bouton (js/main.js passe alors aria-expanded à « true »). */
.menu-deroulant:hover .menu-deroulant-liste,
.menu-deroulant-bouton[aria-expanded="true"] + .menu-deroulant-liste {
    display: block;
}

/* Liens de la liste : bleu foncé sur blanc, fond bleu très clair au survol. */
.menu-principal-liste .menu-deroulant-liste a {
    padding: var(--espace-petit) var(--espace-grand);
    color: var(--couleur-bleu-fonce);
    border-bottom: 0;
    white-space: nowrap;
}

.menu-principal-liste .menu-deroulant-liste a:hover,
.menu-principal-liste .menu-deroulant-liste a.lien-actif {
    background-color: var(--couleur-fond-annonce);
}

.menu-principal-liste .menu-deroulant-liste a:focus-visible {
    outline-color: var(--couleur-bleu-logo);
}


/* ==========================================================================
   3. PIED DE PAGE (inc/footer.php)
   Bande bleue de la même largeur que le bandeau du haut, texte blanc,
   3 colonnes : juridique + contact | identité (la plus large) | liens
   légaux + copyright, séparées par des traits verticaux blancs.
   ========================================================================== */

.pied-de-page {
    width: var(--largeur-bandeau-haut);
    margin: var(--espace-tres-grand) auto var(--espace-petit);
    padding: var(--espace-tres-petit) var(--espace-grand);
    background-color: var(--couleur-bleu-logo);
    color: var(--couleur-blanc);
    font-family: var(--police-principale);
    font-size: var(--taille-texte-petit);
    line-height: var(--hauteur-ligne-titres);

    /* 3 colonnes :
       - colonnes 1 et 3 de MÊME largeur (--largeur-cote-pied-de-page),
         juste suffisante pour leur texte ;
       - colonne centrale (1fr) : toute la place restante, la plus large.
       Le nom de l'entreprise est donc exactement au centre de la bande,
       aligné avec le titre du bandeau du haut. */
    display: grid;
    grid-template-columns: var(--largeur-cote-pied-de-page) 1fr var(--largeur-cote-pied-de-page);
    grid-template-areas: "gauche  identite  legale";
}

/* Une colonne = ses lignes l'une sous l'autre, centrées en hauteur. */
.pied-de-page-colonne {
    margin: 0;
    font-style: normal;          /* <address> s'affiche en italique par défaut */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--espace-minuscule);
}

/* Colonne 1 : ses deux lignes ont exactement la même largeur (celle de
   la plus longue) et sont « justifiées » : « SARL… » et le téléphone
   commencent au même bord gauche, le SIRET et l'email finissent au même
   bord droit. */
.colonne-gauche {
    grid-area: gauche;
    padding-right: var(--espace-moyen);
    display: grid;
    justify-content: center;
    align-content: center;
}

.colonne-gauche .pied-de-page-ligne {
    justify-content: space-between;
}

/* Colonne centrale : traits blancs de chaque côté. */
.colonne-identite {
    grid-area: identite;
    padding: 0 var(--espace-moyen);
    border-left: var(--epaisseur-trait-pied-de-page) solid var(--couleur-blanc);
    border-right: var(--epaisseur-trait-pied-de-page) solid var(--couleur-blanc);
}

.colonne-legale {
    grid-area: legale;
    padding-left: var(--espace-moyen);
}

/* La colonne 1 a sa marge à droite, la colonne 3 à gauche : leur texte
   est centré dans l'espace restant. */

/* Une ligne d'une colonne : ses informations côte à côte, séparées par
   un espace bien marqué (à la place d'un séparateur). */
.pied-de-page-ligne {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--espace-moyen);
}

/* Une information n'est jamais coupée en deux
   (ex. « RCS Nice 326 726 619 » reste d'un seul tenant). */
.pied-de-page-ligne > * {
    white-space: nowrap;
}

/* Petit tiret blanc entre « Mentions légales » et « Politique de
   confidentialité ». Les espaces qui l'entourent sont réduits pour qu'il
   reste proche des deux liens. */
.separateur-pied-de-page {
    margin: 0 calc(var(--espace-petit) - var(--espace-moyen));
}

/* « Nouvelle Carrosserie Migliore » : en Impact, en grand, comme le titre
   du bandeau du haut. Exceptionnellement en blanc et non en bleu : du
   bleu sur la bande bleue serait invisible. */
.pied-de-page-nom {
    font-family: var(--police-titre-entreprise);
    font-size: var(--taille-nom-pied-de-page);
    font-weight: var(--epaisseur-normale);   /* Impact est déjà très épaisse */
    letter-spacing: 0.02em;
}

/* Liens du pied de page : blancs, soulignés au survol. */
.pied-de-page a {
    color: var(--couleur-blanc);
}

.pied-de-page a:hover {
    color: var(--couleur-blanc);
    text-decoration: underline;
}

/* Contour de sélection au clavier en blanc (le bleu serait invisible
   sur la bande bleue). */
.pied-de-page a:focus-visible {
    outline-color: var(--couleur-blanc);
}


/* ==========================================================================
   4. PAGES DE TEXTE (mentions légales, et plus tard autres pages simples)
   Une colonne de texte centrée, d'une largeur confortable à lire.
   ========================================================================== */

.page-texte {
    width: 100%;
    max-width: var(--largeur-texte);
    margin: 0 auto;
    padding: var(--espace-tres-grand) var(--marge-cotes-ecran);
}

/* Grand titre de la page (« Mentions légales », « Politique de
   confidentialité »), avec un trait bleu dessous. */
.page-texte h1 {
    margin: var(--espace-tres-grand) 0 var(--espace-grand);
    padding-bottom: var(--espace-petit);
    font-family: var(--police-principale);
    font-size: var(--taille-titre-section);
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-bleu-fonce);
    border-bottom: var(--epaisseur-soulignement) solid var(--couleur-bleu-logo);
}

/* Le premier titre de la page n'a pas d'espace au-dessus. */
.page-texte h1:first-child {
    margin-top: 0;
}

/* Le lien « Politique de confidentialité » du pied de page fait défiler
   jusqu'à ce titre : on laisse un peu d'air au-dessus. */
.page-texte h1[id] {
    scroll-margin-top: var(--espace-grand);
}

/* Titre de chaque partie (« Éditeur du site », « Hébergement »…). */
.page-texte h2 {
    margin: var(--espace-grand) 0 var(--espace-petit);
    font-family: var(--police-principale);
    font-size: var(--taille-titre-carte);
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-bleu-fonce);
}

.page-texte p {
    margin: 0 0 var(--espace-moyen);
}

/* Liste d'informations (siège, SIRET, TVA…) : sans puces, une par ligne. */
.liste-infos {
    list-style: none;
    margin: 0 0 var(--espace-moyen);
    padding: 0;
    display: grid;
    gap: var(--espace-tres-petit);
}

/* Intitulé de chaque information (« Siège social : »…), en gras. */
.libelle {
    font-weight: var(--epaisseur-grasse);
}

/* Liens dans le texte : soulignés, pour bien les repérer. */
.page-texte a {
    text-decoration: underline;
}

/* Date de mise à jour, en bas de page, plus discrète. */
.date-mise-a-jour {
    margin-top: var(--espace-tres-grand);
    font-size: var(--taille-texte-petit);
    color: var(--couleur-gris-texte);
}


/* ==========================================================================
   5. PAGE CONTACT (contact.php)
   Formulaire à gauche, coordonnées / horaires / carte à droite, chacun
   dans une carte blanche qui ressort du fond.
   ========================================================================== */

.page-contact {
    width: 100%;
    max-width: var(--largeur-max-contenu);
    margin: 0 auto;
    padding: var(--espace-tres-grand) var(--marge-cotes-ecran);
}

/* Titre « Contact » et texte d'introduction. */
.page-contact-titre {
    margin: 0 0 var(--espace-petit);
    font-family: var(--police-principale);
    font-size: var(--taille-titre-page);
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-bleu-fonce);
}

.page-contact-intro {
    max-width: var(--largeur-texte);
    margin: 0 0 var(--espace-tres-grand);
    font-size: var(--taille-texte-grand);
}

/* Deux colonnes : formulaire (plus large) et coordonnées. */
.page-contact-grille {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--espace-tres-grand);
    align-items: start;
}

/* Carte blanche (formulaire, coordonnées). */
.carte-contact {
    background-color: var(--couleur-blanc);
    border: var(--epaisseur-bordure) solid var(--couleur-gris-bordure);
    border-radius: var(--arrondi-moyen);
    box-shadow: var(--ombre-carte);
    padding: var(--espace-tres-grand);
}

.carte-contact h2 {
    margin: 0 0 var(--espace-grand);
    font-family: var(--police-principale);
    font-size: var(--taille-titre-carte);
    color: var(--couleur-bleu-fonce);
}

.carte-contact h3 {
    margin: var(--espace-grand) 0 var(--espace-petit);
    font-family: var(--police-principale);
    font-size: var(--taille-texte-grand);
    color: var(--couleur-bleu-fonce);
}


/* --- 5.1 Messages (succès en vert, erreur en rouge) -------------------- */

.message-succes,
.message-erreur {
    margin: 0 0 var(--espace-grand);
    padding: var(--espace-moyen);
    border-radius: var(--arrondi-petit);
    border-left: var(--epaisseur-bordure-accent) solid;
    font-weight: var(--epaisseur-semi-grasse);
}

.message-succes {
    color: var(--couleur-message-succes);
    background-color: var(--couleur-fond-succes);
    border-left-color: var(--couleur-message-succes);
}

.message-erreur {
    color: var(--couleur-message-erreur);
    background-color: var(--couleur-fond-erreur);
    border-left-color: var(--couleur-message-erreur);
}


/* --- 5.2 Formulaire ---------------------------------------------------- */

.formulaire-contact {
    display: grid;
    gap: var(--espace-moyen);
}

.mention-obligatoire {
    margin: 0;
    font-size: var(--taille-texte-petit);
    color: var(--couleur-gris-texte);
}

/* Étoile des champs obligatoires. */
.etoile {
    color: var(--couleur-message-erreur);
}

/* Deux champs côte à côte (nom + prénom, société + email). */
.formulaire-ligne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espace-moyen);
}

/* Un champ : son intitulé au-dessus, la zone de saisie dessous. */
.formulaire-champ {
    display: grid;
    gap: var(--espace-tres-petit);
}

.formulaire-champ label {
    font-weight: var(--epaisseur-semi-grasse);
}

.formulaire-champ input,
.formulaire-champ textarea {
    width: 100%;
    padding: var(--espace-petit) var(--espace-moyen);
    font-family: var(--police-principale);
    font-size: var(--taille-texte-normal);
    color: var(--couleur-anthracite);
    background-color: var(--couleur-fond-page);
    border: var(--epaisseur-bordure) solid var(--couleur-gris-bordure);
    border-radius: var(--arrondi-petit);
    transition: border-color var(--duree-transition);
}

.formulaire-champ textarea {
    resize: vertical;     /* le visiteur peut agrandir la zone en hauteur */
}

/* Zone de saisie active : bordure bleue. */
.formulaire-champ input:focus,
.formulaire-champ textarea:focus {
    border-color: var(--couleur-bleu-moyen);
    background-color: var(--couleur-blanc);
}

/* Champ en erreur : bordure rouge. */
.formulaire-champ [aria-invalid="true"] {
    border-color: var(--couleur-message-erreur);
}

/* Message d'erreur sous un champ. */
.erreur-champ {
    margin: 0;
    font-size: var(--taille-texte-petit);
    color: var(--couleur-message-erreur);
}

/* Champ piège anti-robots : placé hors de l'écran, invisible pour les
   visiteurs (mais présent dans la page, pour piéger les robots). */
.champ-piege {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Bouton « Envoyer ma demande », et boutons principaux des autres pages
   (ex. « Parlez-nous de votre projet » sur l'accueil) : même apparence. */
.bouton-envoyer,
.bouton-principal {
    justify-self: start;
    padding: var(--espace-petit) var(--espace-tres-grand);
    font-family: var(--police-principale);
    font-size: var(--taille-texte-grand);
    font-weight: var(--epaisseur-grasse);
    color: var(--couleur-blanc);
    background-color: var(--couleur-bleu-logo);
    border: none;
    border-radius: var(--arrondi-petit);
    cursor: pointer;
    transition: background-color var(--duree-transition);
}

.bouton-envoyer:hover,
.bouton-principal:hover {
    color: var(--couleur-blanc);
    background-color: var(--couleur-bleu-fonce);
}

/* Le bouton principal est un lien : on enlève le soulignement des liens. */
.bouton-principal {
    display: inline-block;
    text-decoration: none;
}

/* Mention RGPD sous le bouton. */
.mention-rgpd {
    margin: 0;
    font-size: var(--taille-texte-petit);
    color: var(--couleur-gris-texte);
}

.mention-rgpd a {
    text-decoration: underline;
}


/* --- 5.3 Coordonnées, horaires, carte ----------------------------------- */

/* Téléphone en grand, bien visible. */
.telephone-en-clair {
    margin: 0 0 var(--espace-moyen);
    font-size: var(--taille-titre-section);
    font-weight: var(--epaisseur-grasse);
    line-height: var(--hauteur-ligne-titres);
}

.telephone-en-clair a {
    color: var(--couleur-bleu-logo);
}

/* Adresse postale et email, une information par ligne. */
.coordonnees {
    display: grid;
    gap: var(--espace-minuscule);
    font-style: normal;
}

/* « Nouvelle Carrosserie Migliore » dans les coordonnées : en Impact et
   en bleu (règle de la charte), un peu plus gros que le texte courant. */
.nom-entreprise-coordonnees {
    margin-bottom: var(--espace-tres-petit);
    font-family: var(--police-titre-entreprise);
    font-size: var(--taille-nom-coordonnees);
    line-height: var(--hauteur-ligne-titres);
    letter-spacing: 0.02em;
    color: var(--couleur-bleu-logo);
}

/* Horaires : les jours en gras, et les heures juste en dessous. */
/* Horaires (inc/horaires.php) : un jour par ligne, le jour à gauche, les
   plages horaires à droite sur la même ligne (« 8h30 – 12h00 / 14h00 –
   17h30 »), jours séparés par un trait fin. */
.horaires {
    margin: 0;
}

.horaires-ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--espace-moyen);
    padding: var(--espace-tres-petit) 0;
    border-bottom: var(--epaisseur-bordure) solid var(--couleur-gris-bordure);
}

.horaires-ligne:last-child {
    border-bottom: none;
}

.horaires dt {
    font-weight: var(--epaisseur-semi-grasse);
}

.horaires dd {
    margin: 0;
    display: flex;
    flex-wrap: wrap;            /* sur un écran très étroit, l'après-midi passe dessous */
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
}

/* « / » entre la plage du matin et celle de l'après-midi (placé à la fin
   de la plage du matin : si la ligne se coupe, le « / » reste en fin de
   ligne et non au début de la suivante). */
.horaires dd span:not(:last-child)::after {
    content: "\00a0/\00a0";
}

/* Jours de fermeture : en gris, pour que les jours ouverts ressortent. */
.horaires-ferme {
    color: var(--couleur-gris-texte);
}

.horaires-mention {
    margin: var(--espace-petit) 0 0;
    font-size: var(--taille-texte-petit);
    font-style: italic;
    color: var(--couleur-gris-texte);
}

/* Bloc d'attente de la carte (avant le clic) et carte elle-même :
   même taille, pour que rien ne bouge au moment de l'affichage. */
.emplacement-carte,
.carte-google {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: var(--epaisseur-bordure) solid var(--couleur-gris-bordure);
    border-radius: var(--arrondi-petit);
}

.emplacement-carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espace-moyen);
    padding: var(--espace-grand);
    text-align: center;
    background-color: var(--couleur-gris-clair);
}

.emplacement-carte p {
    margin: 0;
    font-size: var(--taille-texte-petit);
    color: var(--couleur-gris-texte);
}

/* Bouton « Afficher la carte ». */
.bouton-carte {
    padding: var(--espace-petit) var(--espace-grand);
    font-family: var(--police-principale);
    font-size: var(--taille-texte-normal);
    font-weight: var(--epaisseur-semi-grasse);
    color: var(--couleur-bleu-logo);
    background-color: var(--couleur-blanc);
    border: var(--epaisseur-soulignement) solid var(--couleur-bleu-logo);
    border-radius: var(--arrondi-petit);
    cursor: pointer;
    transition: background-color var(--duree-transition), color var(--duree-transition);
}

.bouton-carte:hover {
    color: var(--couleur-blanc);
    background-color: var(--couleur-bleu-logo);
}

.lien-carte {
    font-size: var(--taille-texte-petit);
    text-decoration: underline;
}


/* ==========================================================================
   6. PAGE D'ACCUEIL (index.php)
   ========================================================================== */

/* --- 6.1 Carrousel : bande de photos qui défile en continu ------------- */

/* Même largeur que le bandeau (85 % de l'écran), centré, juste sous le menu. */
.carrousel {
    position: relative;
    width: var(--largeur-bandeau-haut);
    margin: 0 auto;
    padding: var(--espace-petit) 0;
}

/* « Fenêtre » : ne montre que la partie de la bande de photos qui est
   dans la largeur du carrousel. */
.carrousel-fenetre {
    overflow: hidden;
}

/* La bande de photos : toutes les photos côte à côte (série écrite deux
   fois). L'animation la fait glisser vers la gauche de la moitié de sa
   longueur, c'est-à-dire d'une série complète : à ce moment, la 2e série
   est exactement à la place de la 1re, et l'animation recommence sans que
   l'on voie la coupure. */
.carrousel-piste {
    display: flex;
    gap: var(--ecart-photos-carrousel);
    width: max-content;
    /* Durée d'un tour = durée par photo x nombre de photos (nombre donné
       par js/main.js ; 20 par défaut si le JavaScript est désactivé). */
    animation: defiler-carrousel calc(var(--duree-par-photo-carrousel) * var(--nombre-photos-carrousel, 20)) linear infinite;
}

@keyframes defiler-carrousel {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - var(--ecart-photos-carrousel) / 2)); }
}

/* Arrêt du défilement : au survol de la souris, quand un élément du
   carrousel est sélectionné au clavier, ou avec le bouton pause. */
.carrousel:hover .carrousel-piste,
.carrousel:focus-within .carrousel-piste,
.carrousel.est-en-pause .carrousel-piste {
    animation-play-state: paused;
}

/* Une photo (aucun texte affiché dessus). */
.carrousel-photo {
    position: relative;
    margin: 0;
    flex: 0 0 auto;
}

.carrousel-photo img {
    display: block;
    height: var(--hauteur-photo-carrousel);
    width: auto;
    max-width: none;
}

/* Bouton pause / lecture : petit rond blanc en bas à droite des photos. */
.carrousel-bouton-pause {
    position: absolute;
    right: var(--espace-petit);
    bottom: calc(var(--espace-petit) * 2);
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--taille-texte-petit);
    color: var(--couleur-bleu-logo);
    background-color: var(--couleur-blanc);
    border: var(--epaisseur-soulignement) solid var(--couleur-bleu-logo);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.9;
}

.carrousel-bouton-pause:hover {
    opacity: 1;
}

/* Le bouton reste caché tant que js/main.js ne l'a pas activé. */
.carrousel-bouton-pause[hidden] {
    display: none;
}

/* Visiteurs ayant demandé à réduire les animations : pas de défilement ;
   la bande de photos se fait défiler à la main. */
@media (prefers-reduced-motion: reduce) {
    .carrousel-piste {
        animation: none;
    }

    .carrousel-fenetre {
        overflow-x: auto;
    }
}


/* --- 6.2 Bande bleue sous le carrousel ---------------------------------- */

/* Simple séparation, de la même largeur et de la même hauteur que la
   bande bleue du menu. */
.bande-bleue-carrousel {
    width: var(--largeur-bandeau-haut);
    height: var(--hauteur-bande-bleue-epaisse);
    margin: 0 auto;
    background-color: var(--couleur-bleu-logo);
}


/* --- 6.3 Corps de la page d'accueil (disposition « hybride ») ---------- */

/* Même largeur que le bandeau et le pied de page (85 %), centré : les
   bords du contenu sont alignés avec ceux du bandeau. */
.accueil-corps {
    width: var(--largeur-bandeau-haut);
    margin: 0 auto;
    padding: var(--espace-tres-grand) 0;
    display: flex;
    flex-direction: column;
    gap: var(--espace-tres-grand);   /* même écart qu'entre présentation et certification */
}

/* Partie haute : grille de 2 colonnes, le contenu principal prend
   plusieurs parts (--parts-contenu-principal) et la colonne de droite
   1 part, avec une largeur minimale pour la colonne. « minmax(0, …) » empêche un contenu trop
   large (photo, mot très long) d'élargir la colonne principale. */
.accueil-haut {
    display: grid;
    grid-template-columns: minmax(0, var(--parts-contenu-principal)) minmax(var(--largeur-min-colonne-droite), 1fr);
    gap: var(--espace-tres-grand);
    align-items: start;
}

/* Présentation de l'entreprise (en haut de la zone principale).
   Mise en page « classique » (et non en grille) : c'est elle qui permet
   au texte de s'écouler autour des images placées à droite. */
.presentation {
    container-type: inline-size; /* les largeurs d'images (« cqi ») se calculent
                                    d'après la largeur de la présentation */
}

/* Texte à gauche, étroite colonne à droite : le bord droit du texte reste
   aligné de haut en bas. Les deux colonnes ont la même hauteur. */
.presentation-corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--largeur-image-dans-texte);
    gap: var(--espace-grand);
}

.presentation-texte {
    display: flow-root; /* contient l'image insérée à gauche dans le texte */
}

/* Le dernier paragraphe n'a pas de marge dessous : sa dernière ligne est
   alignée sur le bas de l'image du bas de la colonne de droite. */
.presentation-texte p:last-child {
    margin-bottom: 0;
}

/* Colonne de droite : image en haut, image en bas, et le bouton centré
   dans l'espace entre les deux (marges automatiques). */
.presentation-images {
    display: flex;
    flex-direction: column;
    gap: var(--espace-petit);
}

/* Bouton de la colonne : un peu plus compact, pour tenir sur une ligne. */
.bouton-colonne-images {
    margin-top: auto;
    margin-bottom: auto;
    padding: var(--espace-petit);
    font-size: var(--taille-texte-normal);
}

.presentation-titre {
    margin: 0 0 var(--espace-moyen);
    font-family: var(--police-principale);
    font-size: var(--taille-titre-presentation);
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-bleu-fonce);
    /* Sur une seule ligne (sur tablette et téléphone, il peut passer sur
       plusieurs lignes : voir la partie 7). */
    white-space: nowrap;
}

/* Paragraphes : toute la largeur de la zone, texte justifié (bords gauche
   et droit alignés). La coupure des mots en fin de ligne (« hyphens »)
   évite les grands espaces que la justification crée parfois. */
.presentation p {
    margin: 0 0 var(--espace-moyen);
    font-size: var(--taille-texte-grand);
    line-height: var(--hauteur-ligne-texte);
    text-align: justify;
    hyphens: auto;
}

/* Images de la présentation (exemples d'études) : dans un cadre blanc,
   avec une courte légende dessous. Toutes de la même largeur, qu'elles
   soient insérées dans le texte ou dans la colonne de droite. */
.image-dans-texte {
    display: block;
    width: var(--largeur-image-dans-texte);
    margin: 0;
    padding: var(--espace-petit);
    background-color: var(--couleur-blanc);
    border: var(--epaisseur-bordure) solid var(--couleur-gris-bordure);
    border-radius: var(--arrondi-petit);
    text-align: center;
}

.image-a-gauche {
    float: left;
    margin: var(--espace-tres-petit) var(--espace-grand) var(--espace-moyen) 0;
}

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

.legende-image {
    display: block;
    margin-top: var(--espace-tres-petit);
    font-size: var(--taille-texte-petit);
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-gris-texte);
}

/* Mots clés mis en valeur dans le texte de présentation : en gras et du
   même bleu foncé que le titre (avec modération : quelques expressions). */
.presentation strong {
    font-weight: var(--epaisseur-grasse);
    color: var(--couleur-bleu-fonce);
}

/* --- Certification « Opérateur qualifié UTAC » (sous la présentation) --- */

.accueil-principal {
    display: flex;
    flex-direction: column;
    gap: var(--espace-tres-grand);
}

.certification {
    padding-top: var(--espace-grand);
    border-top: var(--epaisseur-soulignement) solid var(--couleur-gris-bordure);
}

.certification-titre {
    margin: 0 0 var(--espace-moyen);
    font-family: var(--police-principale);
    font-size: var(--taille-titre-presentation);
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-bleu-fonce);
    text-wrap: balance;
}

.certification > p {
    margin: 0 0 var(--espace-moyen);
    font-size: var(--taille-texte-grand);
    line-height: var(--hauteur-ligne-texte);
    text-align: justify;
    hyphens: auto;
}

.certification strong {
    color: var(--couleur-bleu-fonce);
}

/* Les 7 étapes : petites cartes blanches sur 2 colonnes, chacune avec son
   numéro dans une pastille bleue (compteur CSS, pas de numéro dans le texte). */
.etapes {
    list-style: none;
    margin: 0 0 var(--espace-moyen);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace-moyen);
    counter-reset: etape;
}

.etapes li {
    counter-increment: etape;
    position: relative;
    padding: var(--espace-moyen) var(--espace-moyen) var(--espace-moyen) 3.25rem;
    background-color: var(--couleur-blanc);
    border: var(--epaisseur-bordure) solid var(--couleur-gris-bordure);
    border-radius: var(--arrondi-moyen);
}

.etapes li::before {
    content: counter(etape);
    position: absolute;
    left: var(--espace-moyen);
    top: var(--espace-moyen);
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--couleur-bleu-logo);
    color: var(--couleur-blanc);
    font-weight: var(--epaisseur-grasse);
}

/* La dernière étape (dossier technique) occupe toute la largeur si elle
   est seule sur sa ligne. */
.etapes li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.etapes h3 {
    margin: 0 0 var(--espace-tres-petit);
    font-size: var(--taille-texte-grand);
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-bleu-fonce);
}

.etapes p {
    margin: 0;
    font-size: var(--taille-texte-normal);
    line-height: var(--hauteur-ligne-texte);
}


/* Colonne de droite : ses encarts s'empilent les uns sous les autres. */
.colonne-droite {
    display: flex;
    flex-direction: column;
    gap: var(--espace-grand);
}

/* Encart de la colonne de droite (horaires…) : carte blanche qui ressort
   du fond, titre souligné d'un trait bleu. */
.encart-colonne {
    container-type: inline-size; /* permet d'adapter le contenu à la largeur de l'encart */
    padding: var(--espace-grand) var(--espace-moyen);
    background-color: var(--couleur-blanc);
    border: var(--epaisseur-bordure) solid var(--couleur-gris-bordure);
    border-radius: var(--arrondi-moyen);
    box-shadow: var(--ombre-carte);
}

.encart-colonne-titre {
    margin: 0 0 var(--espace-moyen);
    padding-bottom: var(--espace-petit);
    font-family: var(--police-principale);
    font-size: var(--taille-titre-carte);
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-bleu-fonce);
    border-bottom: var(--epaisseur-soulignement) solid var(--couleur-bleu-logo);
}

.encart-colonne .horaires {
    font-size: var(--taille-texte-normal);
}

/* Encart étroit (ordinateur portable) : horaires un peu plus petits, pour
   que chaque jour tienne sur une seule ligne. */
@container (max-width: 18rem) {
    .encart-colonne .horaires {
        font-size: var(--taille-texte-petit);
    }

    .encart-colonne .horaires-ligne {
        gap: var(--espace-petit);
    }
}

/* « Ouvert / fermé en ce moment » : pastille verte ou rouge et phrase,
   en tête des Informations importantes. */
.etat-ouverture {
    display: flex;
    align-items: baseline;
    gap: var(--espace-petit);
    margin: 0 0 var(--espace-moyen);
    font-weight: var(--epaisseur-grasse);
}

.etat-ouverture-pastille {
    flex: 0 0 auto;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
}

.etat-ouvert {
    color: var(--couleur-message-succes);
}

.etat-ferme {
    color: var(--couleur-message-erreur);
}

.etat-ouverture-pastille {
    background-color: currentColor; /* même couleur que la phrase */
}

/* Annonces « Informations importantes » : fond bleu très pâle et liseré
   bleu sur le côté ; les annonces datées (fermetures…) ont un liseré
   plus vif, pour attirer l'œil. */
.annonce {
    padding: var(--espace-petit) var(--espace-moyen);
    background-color: var(--couleur-fond-annonce);
    border-left: var(--epaisseur-bordure-accent) solid var(--couleur-bleu-moyen);
    border-radius: var(--arrondi-petit);
}

.annonce + .annonce {
    margin-top: var(--espace-moyen);
}

.annonce-temporaire {
    border-left-color: var(--couleur-bleu-logo);
}

/* Fermeture exceptionnelle : en rouge, comme l'indicateur « Fermé ». */
.annonce-fermeture {
    background-color: var(--couleur-fond-erreur);
    border-left-color: var(--couleur-message-erreur);
}

.annonce-fermeture .annonce-titre {
    color: var(--couleur-message-erreur);
}

.annonce-titre {
    margin: 0 0 var(--espace-tres-petit);
    font-size: var(--taille-texte-normal);
    font-weight: var(--epaisseur-grasse);
    color: var(--couleur-bleu-fonce);
}

.annonce p {
    margin: 0 0 var(--espace-tres-petit);
    font-size: var(--taille-texte-petit);
    line-height: var(--hauteur-ligne-texte);
    text-align: justify;   /* texte aligné à gauche et à droite */
    hyphens: auto;         /* césure des mots longs (évite les grands blancs) */
}

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

/* Liste à puces (lignes commençant par « - » dans le fichier). */
.annonce-liste {
    margin: 0 0 var(--espace-tres-petit);
    padding-left: var(--espace-moyen);
    font-size: var(--taille-texte-petit);
    line-height: var(--hauteur-ligne-texte);
    text-align: justify;
    hyphens: auto;
}

.annonce-liste:last-child {
    margin-bottom: 0;
}

/* Paragraphe mis en valeur (« ! » dans le fichier) : plus gros, en gras. */
.annonce .annonce-en-valeur {
    margin-top: var(--espace-petit);
    font-size: var(--taille-texte-normal);
    font-weight: var(--epaisseur-grasse);
    color: var(--couleur-bleu-fonce);
}

/* Lien sous l'annonce (« bouton: » dans le fichier), ex. « Contactez-nous ». */
.annonce-lien {
    display: inline-block;
    margin-top: var(--espace-petit);
    font-weight: var(--epaisseur-grasse);
    color: var(--couleur-bleu-logo);
}

.annonce-lien::after {
    content: " \2192"; /* flèche → */
}

/* « Nous joindre » : téléphone en grand, adresse, bouton. */
.encart-telephone {
    margin: 0 0 var(--espace-petit);
    font-size: var(--taille-titre-carte);
    font-weight: var(--epaisseur-grasse);
    font-variant-numeric: tabular-nums;
}

.encart-telephone a {
    color: var(--couleur-bleu-logo);
    text-decoration: none;
}

.encart-adresse {
    margin: 0 0 var(--espace-moyen);
    font-style: normal;
    line-height: var(--hauteur-ligne-texte);
}

/* Bouton qui occupe toute la largeur de son encart. */
.bouton-pleine-largeur {
    display: block;
    width: 100%;
    padding-left: var(--espace-moyen);
    padding-right: var(--espace-moyen);
    text-align: center;
}

/* Suite de la page : sections empilées, sur toute la largeur. */
.accueil-sections {
    display: flex;
    flex-direction: column;
    gap: var(--espace-tres-grand);
}

/* Liseré gris au-dessus de chaque section pleine largeur (Nos aménagements,
   fin de page), comme celui qui sépare la présentation de la certification. */
.accueil-sections > * {
    padding-top: var(--espace-grand);
    border-top: var(--epaisseur-soulignement) solid var(--couleur-gris-bordure);
}

/* --- Nos aménagements : cartes photo + titre + texte (pleine largeur) --- */

.titre-section {
    margin: 0 0 var(--espace-grand);
    font-family: var(--police-principale);
    font-size: var(--taille-titre-presentation);
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-bleu-fonce);
}

/* 3 cartes par ligne (2 lignes pour 6 cartes). */
.cartes-amenagements {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;   /* toutes les cartes ont la même hauteur */
    gap: var(--espace-grand);
}

/* Une carte : carré blanc, photo en haut, titre et texte dessous. */
.carte-amenagement {
    background-color: var(--couleur-blanc);
    border: var(--epaisseur-bordure) solid var(--couleur-gris-bordure);
    border-radius: var(--arrondi-moyen);
    box-shadow: var(--ombre-carte);
    overflow: hidden;
    transition: box-shadow var(--duree-transition);
}

.carte-amenagement img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Carte cliquable (quand sa page existe) : toute la carte est le lien. */
.carte-amenagement-lien {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.carte-amenagement:has(.carte-amenagement-lien):hover {
    box-shadow: var(--ombre-carte-survol);
}

.carte-amenagement-texte {
    padding: var(--espace-moyen) var(--espace-grand) var(--espace-grand);
}

.carte-amenagement h3 {
    margin: 0 0 var(--espace-petit);
    font-size: var(--taille-titre-carte);
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-bleu-fonce);
}

.carte-amenagement p {
    margin: 0;
    font-size: var(--taille-texte-grand);
    line-height: var(--hauteur-ligne-texte);
    text-align: justify;   /* bords gauche et droit alignés */
    hyphens: auto;
}

/* La carte est une colonne : le bandeau partenaire se place tout en bas. */
.carte-amenagement {
    display: flex;
    flex-direction: column;
}

.carte-amenagement-lien,
.carte-amenagement-texte {
    flex: 1;
}

/* Bandeau partenaire en bas de carte (ex. logo JPM + « Membre du réseau
   JPM »), séparé du texte par un trait fin ; lien vers le site du partenaire. */
.carte-partenaire {
    display: flex;
    align-items: center;
    justify-content: center;   /* logo et mention centrés dans la carte */
    gap: var(--espace-moyen);
    /* Hauteur fixe (celle du plus grand logo) : le trait gris au-dessus est
       ainsi au même niveau sur toutes les cartes, avec ou sans logos. */
    height: calc(var(--hauteur-logo-partenaire) * 1.6 + var(--espace-petit) * 2);
    margin: 0 var(--espace-grand) var(--espace-moyen);
    padding-top: var(--espace-petit);
    border-top: var(--epaisseur-bordure) solid var(--couleur-gris-bordure);
    font-weight: var(--epaisseur-grasse);
    color: var(--couleur-bleu-fonce);
    text-decoration: none;
}

.carte-partenaire a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.carte-partenaire-mention:hover {
    text-decoration: underline;
}

/* Plusieurs logos : répartis régulièrement sur toute la largeur. */
.carte-partenaire:not(:has(.carte-partenaire-mention)) {
    justify-content: space-evenly;
}

/* À hauteur égale, un logo carré paraît bien plus petit qu'un logo allongé :
   les logos presque carrés (HMF, JPM) ou plus hauts que larges (Schneider)
   sont affichés plus grands, les logos de forme moyenne (BOB, NCM) un peu
   plus grands. Forme calculée par lireFormatLogo() (fonctions-contenu.php). */
.carte-amenagement .carte-partenaire img.logo-moyen {
    height: calc(var(--hauteur-logo-partenaire) * 1.35);
}

.carte-amenagement .carte-partenaire img.logo-carre {
    height: calc(var(--hauteur-logo-partenaire) * 1.6);
}

/* Logos de même hauteur, largeur selon leur forme. */
.carte-amenagement .carte-partenaire img {
    width: auto;
    height: var(--hauteur-logo-partenaire);
    max-width: 7rem;
    aspect-ratio: auto;
    object-fit: contain;
}

.carte-amenagement-suite {
    display: inline-block;
    margin-top: var(--espace-petit);
    font-weight: var(--epaisseur-grasse);
    color: var(--couleur-bleu-logo);
}

.carte-amenagement-suite::after {
    content: " \2192"; /* flèche → */
}


/* --- Fin de la page : slogan + « Nous joindre », côte à côte ----------- */

.fin-de-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace-grand);
}

/* Bouton centré sous les coordonnées. */
.fin-de-page-joindre {
    text-align: center;
}

/* Slogan : grand, centré dans une carte blanche de même hauteur que
   « Nous joindre ». */
.fin-de-page-slogan {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espace-grand);
    text-align: center;
    font-family: var(--police-principale);
    font-size: var(--taille-titre-presentation);
    font-weight: var(--epaisseur-grasse);
    font-style: italic;
    line-height: var(--hauteur-ligne-titres);
    color: var(--couleur-bleu-fonce);
    background-color: var(--couleur-blanc);
    border: var(--epaisseur-bordure) solid var(--couleur-gris-bordure);
    border-radius: var(--arrondi-moyen);
    box-shadow: var(--ombre-carte);
}


/* ==========================================================================
   7. ADAPTATION AUX ÉCRANS PLUS PETITS
   Les largeurs ci-dessous (en pixels) sont les « points de bascule » où la
   mise en page change. Elles ne peuvent pas être des variables CSS
   (limite technique du langage), elles sont donc écrites ici.
   ========================================================================== */

/* Écrans moyens (moins de 1400 pixels de large) : dans le pied de page,
   le nom et l'adresse passent au-dessus, sur toute la largeur, et les
   colonnes 1 et 3 se placent en dessous, côte à côte :

        nom de l'entreprise + adresse
        ──────────────────────────────────
        juridique + contact  ┃  liens légaux + © */
@media (max-width: 1400px) {

    .pied-de-page {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "identite  identite"
            "gauche    legale";
        row-gap: var(--espace-petit);
        padding-top: var(--espace-moyen);
        padding-bottom: var(--espace-moyen);
    }

    /* Plus de traits de part et d'autre du nom : un trait horizontal
       sous l'identité, et un trait vertical entre les colonnes 1 et 3. */
    .colonne-identite {
        border-left: none;
        border-right: none;
        border-bottom: var(--epaisseur-trait-pied-de-page) solid var(--couleur-blanc);
        padding: 0 0 var(--espace-petit);
    }

    .colonne-gauche {
        border-right: var(--epaisseur-trait-pied-de-page) solid var(--couleur-blanc);
    }
}

/* Tablettes et téléphones (moins de 900 pixels de large) : tout s'empile
   en une seule colonne centrée. */
@media (max-width: 900px) {

    /* Page Contact : formulaire puis coordonnées, l'un sous l'autre. */
    .page-contact-grille {
        grid-template-columns: 1fr;
    }

    /* Accueil : la colonne de droite passe sous le contenu principal. */
    .accueil-haut {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Fin de page : « Nous joindre » sous le slogan. */
    .fin-de-page {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Images de la présentation un peu plus larges (écran plus étroit). */
    .presentation {
        --largeur-image-dans-texte: 30cqi;
    }

    /* Titre de la présentation : peut passer sur plusieurs lignes. */
    .presentation-titre {
        white-space: normal;
        font-size: var(--taille-titre-section);
    }

    .pied-de-page {
        grid-template-columns: 1fr;
        grid-template-areas:
            "identite"
            "gauche"
            "legale";
    }

    .colonne-gauche {
        border-right: none;
        padding: 0 0 var(--espace-petit);
        border-bottom: var(--epaisseur-trait-pied-de-page) solid var(--couleur-blanc);
    }

    /* Sur petit écran, les lignes de la colonne 1 sont simplement centrées. */
    .colonne-gauche .pied-de-page-ligne {
        justify-content: center;
    }

    .colonne-legale {
        padding: 0;
    }
}

/* Petits écrans (moins de 800 pixels de large) : les deux logos côte à
   côte en haut, puis titre, sous-titre et slogan, centrés (le menu reste
   dans la bande bleue, sur une ou plusieurs lignes) :

        logo NCM    logo UTAC
        titre       titre
        sous-titre  sous-titre
        slogan      slogan      */
@media (max-width: 800px) {

    .zone-identite {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "ncm        utac"
            "titre      titre"
            "soustitre  soustitre"
            "slogan     slogan";
        justify-items: center;
        row-gap: var(--espace-petit);
        padding-left: 0;
        padding-right: 0;
    }
}

/* Téléphones (moins de 600 pixels de large) :
   le bandeau prend toute la largeur (avec une petite marge sur les côtés). */
@media (max-width: 600px) {

    .bandeau-haut,
    .pied-de-page,
    .carrousel,
    .bande-bleue-carrousel,
    .accueil-corps {
        width: auto;
        margin-left: var(--marge-cotes-ecran);
        margin-right: var(--marge-cotes-ecran);
    }

    /* Accueil : cartes « Nos aménagements » sur 2 colonnes. */
    .cartes-amenagements {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Accueil : étapes de la certification sur une seule colonne. */
    .etapes {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Accueil : présentation sur une seule colonne (trop étroit pour que
       le texte entoure les images) ; les images passent sur toute la
       largeur, celles de la colonne de droite sous le texte. */
    .presentation-corps {
        grid-template-columns: minmax(0, 1fr);
    }

    .image-dans-texte {
        float: none;
        width: 100%;
        margin: 0 0 var(--espace-moyen);
    }

    /* Page Contact : un champ par ligne, cartes moins rembourrées. */
    .formulaire-ligne {
        grid-template-columns: 1fr;
    }

    .carte-contact {
        padding: var(--espace-grand) var(--espace-moyen);
    }

    /* Carrousel : photos un peu moins hautes sur téléphone. */
    .carrousel-photo img {
        height: calc(var(--hauteur-photo-carrousel) * 0.75);
    }

    /* Nom de l'entreprise du pied de page : peut passer sur deux lignes,
       pour ne pas dépasser de la bande bleue. */
    .pied-de-page-nom > * {
        white-space: normal;
    }
}