/* ---------------------------------------------------------------------------
   CONCEPT+ — feuille de style unique.

   Particularite du site : il n'y a pas une couleur d'accent mais six, une par
   rubrique du menu, materialisees par la barre de 5px sous chaque entree.
--------------------------------------------------------------------------- */

:root {
    /* accents generaux */
    --orange: #f36639;          /* titres de page, tuiles Metiers, retour-en-haut */
    --orange-survol: rgb(180, 84, 53);   /* fond des tuiles de services au survol */
    --framboise: #c1044b;       /* bandeau adresse, bouton CONTACT, liens du catalogue */

    /* les six couleurs de rubrique, dans l'ordre du menu */
    --rub-rayonnage: #035fcc;
    --rub-amenagement: #ef8a21;
    --rub-bac: #c1044b;
    --rub-manutention: #79227d;
    --rub-environnement: #4ea235;
    --rub-mobilier: #48949d;

    /* neutres */
    --texte: #888888;
    --texte-fort: #333333;
    --fond-menu: #f6f6f6;
    --fond-bande: #f2f2f2;
    --fond-carte: #f9f9f9;
    --footer: #333333;
    --footer-texte: #ededed;
    --bordure: #dddddd;

    --largeur: 1530px;
    --hauteur-menu: 74px;
    --hauteur-diapo: 590px;     /* pilote aussi la remontee des tuiles de services */
}

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

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

body {
    margin: 0;
    /* Repli sur les polices du systeme : le site ne charge aucune police distante,
       ce qui evite une dependance reseau et un appel a un tiers. */
    font-family: 'Ubuntu', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--texte);
    background: #fff;
}

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

a { color: var(--framboise); text-decoration: none; }
a:hover { text-decoration: underline; }

.conteneur {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- bandeau d'adresse (au-dessus du menu, disparait au defilement) ------- */

.bandeau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 20px;
    max-width: var(--largeur);
    margin: 0 auto;
}

.bandeau__adresse {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--framboise);
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bandeau__adresse svg { flex: none; fill: var(--framboise); }

.bandeau__contact {
    display: inline-block;
    padding: 9px 22px;
    background: var(--framboise);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bandeau__contact:hover { background: #9e033e; text-decoration: none; }

/* --- en-tete et menu principal -------------------------------------------- */

.entete { background: var(--fond-menu); }

.entete__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 20px;
}

.entete__logo {
    display: flex;
    align-items: center;
    padding: 16px 0;
}

.entete__logo img { width: 186px; }

/* Les entrees du menu occupent toute la hauteur de la barre, fixee par le logo.
   Le <nav> est deja etire par le align-items: stretch de .entete__inner ; il reste
   a le rendre flex pour que la liste, puis les items, puis les liens en heritent. */
.entete nav { display: flex; }
.nav { height: 100%; }
.nav__item { display: flex; }

/* Le menu est colle en haut des que le bandeau d'adresse a defile. */
.entete--fixe {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.nav {
    display: flex;
    align-items: stretch;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav__item { position: relative; }

.nav__lien {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 12px 14px;
    border-left: 1px solid #e2e2e2;
    /* la couleur de rubrique borde l'entree en bas ET a droite */
    border-right: 2px solid var(--couleur-rubrique);
    border-bottom: 5px solid var(--couleur-rubrique);
    color: var(--texte-fort);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.nav__lien:hover,
.nav__item--ouvert .nav__lien { background: #fff; text-decoration: none; }

/* rubrique de la page courante : liseré vertical de sa couleur */
.nav__item--courant .nav__lien { box-shadow: inset 3px 0 0 var(--couleur-rubrique); }

/* --- deroulant ------------------------------------------------------------ */

.nav__sous {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 950;
    display: none;
    min-width: 280px;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .13);
    list-style: none;
}

/* Au-dela de sept entrees, le deroulant passe sur deux colonnes. */
.nav__sous--large { min-width: 560px; column-count: 2; column-gap: 0; }

/* Le deroulant de la derniere rubrique s'aligne sur le bord droit de son
   entree : ancre a gauche, il sortait de l'ecran. */
.nav__item:last-child .nav__sous { left: auto; right: 0; }

.nav__item:hover .nav__sous,
.nav__item--ouvert .nav__sous { display: block; }

.nav__sous a {
    display: block;
    padding: 10px 18px;
    border-bottom: 1px solid #e8e8e8;
    color: var(--texte);
    font-size: 14px;
    line-height: 1.4;
    break-inside: avoid;
}

.nav__sous a:hover {
    color: var(--couleur-rubrique);
    background: #fff;
    text-decoration: none;
}

/* --- bouton burger (mobile) ----------------------------------------------- */

/* Les trois barres sont positionnees en absolu dans un bouton de taille fixe
   plutot qu'empilees par des marges. Avec l'empilement, la croix ne tombait
   jamais juste : il fallait que la translation vaille exactement l'ecart entre
   deux barres (3 px de barre + 2 x 5 px de marge = 13, et non les 8 px poses),
   et les barres tournees debordaient du bouton sur la droite. Ici les deux
   barres se rejoignent sur la ligne du milieu, quoi qu'il arrive. */
.burger {
    position: relative;
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.burger span {
    position: absolute;
    left: 50%;
    width: 26px;
    height: 3px;
    background: var(--texte-fort);
    transform: translateX(-50%);
    transition: top .25s, transform .25s, opacity .25s;
}

.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 29px; }

.burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: translateX(-50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: translateX(-50%) rotate(-45deg); }

/* --- diaporama d'accueil --------------------------------------------------- */

.diapo {
    position: relative;
    overflow: hidden;
    background: #222;
}

.diapo__piste { position: relative; height: var(--hauteur-diapo); }

.diapo__vue {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* « visibility » retire du parcours clavier les boutons des diapositives
       masquees ; sans delai elle basculerait avant la fin du fondu. */
    visibility: hidden;
    transition: opacity 3s ease, visibility 0s linear 3s;
}

.diapo__vue--active {
    opacity: 1;
    visibility: visible;
    transition: opacity 3s ease, visibility 0s;
}

.diapo__vue img { width: 100%; height: 100%; object-fit: cover; }

/* Une legende PAR diapositive : le texte change avec l'image de fond. Le pave
   reste opaque de bout en bout — pas de fondu propre : il attend deux secondes
   hors du cadre, descend en place, puis s'efface avec l'image de sa vue.

   C'est une animation et non une transition, pour deux raisons : une animation
   se joue aussi au chargement de la page (la premiere vue nait deja active), et
   « backwards » tient le pave hors cadre pendant le delai. L'etat de repos est
   la position finale, si bien qu'au retrait de l'animation le pave ne fait
   aucun saut : il disparait simplement avec le fondu de sa vue. */
@keyframes legende-descend {
    from { transform: translate(-50%, calc(-50% - var(--hauteur-diapo))); }
    to   { transform: translate(-50%, -50%); }
}

/* Le pave n'est pas centre sur le diaporama : il est decale vers la droite. */
.diapo__legende {
    position: absolute;
    top: 50%;
    left: calc(50% + 88px);
    width: min(840px, 86%);
    padding: 10px;
    background: rgba(255, 255, 255, .5);
    text-align: center;
    transform: translate(-50%, -50%);
}

.diapo__vue--active .diapo__legende {
    animation: legende-descend .8s ease 2s backwards;
}

.diapo__titre {
    margin: 0 0 18px;
    color: #12336b;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.25;
}

.diapo__bouton {
    display: inline-block;
    padding: 12px 30px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--framboise);
    color: var(--framboise);
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.diapo__bouton:hover { background: var(--framboise); color: #fff; text-decoration: none; }

.diapo__fleche {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 52px;
    height: 76px;
    background: rgba(255, 255, 255, .55);
    border: 3px solid #fff;          /* blanc franc, sans transparence */
    color: var(--framboise);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.diapo__fleche:hover { background: rgba(255, 255, 255, .85); }
.diapo__fleche--prec { left: 62px; }
.diapo__fleche--suiv { right: 62px; }

/* --- tuiles de services (a cheval sur le bas du diaporama) ----------------- */

/* Les tuiles sont coupees en deux par le bas du diaporama : moitie haute sur
   l'image, moitie basse sur le blanc. La remontee vaut donc la moitie de leur
   propre hauteur — que le CSS ne sait pas lire. La valeur ci-dessous est le
   repli calcule sur le rendu attendu ; site.js la remplace par la moitie de la
   hauteur reellement mesuree, et la reajuste au redimensionnement. */
.services {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1190px;
    margin: -124px auto 0;
    padding: 0 20px;
}

.service {
    padding: 30px 20px 34px;
    background: #808080;             /* opaque : l'image du diaporama ne transparait pas */
    color: #fff;
    text-align: center;
    transition: background .25s ease;
}

.service:hover { background: var(--orange-survol); }

.service img { width: 64px; margin-bottom: 18px; }

.service h3 {
    margin: 0;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.25;
    text-transform: uppercase;
}

/* --- bloc de bienvenue ----------------------------------------------------- */

.bienvenue { padding: 70px 0 40px; }

.bienvenue__haut {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.bienvenue__titre {
    margin: 0 0 6px;
    color: var(--orange);
    font-size: 30px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
}

.bienvenue__sous {
    margin: 0 0 26px;
    color: var(--texte-fort);
    font-size: 30px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
}

.bienvenue p { margin: 0 0 18px; }
.bienvenue strong { color: var(--texte-fort); }

/* --- grille du catalogue --------------------------------------------------- */

.catalogue { padding: 60px 0 70px; background: var(--fond-bande); }

.catalogue__titre {
    max-width: 1180px;
    margin: 0 auto 46px;
    color: var(--texte-fort);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

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

.catalogue__lien {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 78px;
    padding: 16px 18px;
    background: var(--fond-carte);
    color: var(--framboise);
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
    transition: background .2s, color .2s;
}

.catalogue__lien:hover {
    background: #fff;
    color: var(--couleur-rubrique, var(--framboise));
    text-decoration: none;
}

/* --- metiers ---------------------------------------------------------------- */

.metiers { padding: 64px 0 78px; }

.metiers__titre {
    margin: 0 0 46px;
    color: var(--texte-fort);
    font-size: 34px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
}

.metiers__grille {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
    max-width: 1190px;
    margin: 0 auto;
}

.metier {
    position: relative;          /* pour que le z-index du survol prenne effet */
    padding: 26px 10px 22px;
    background: var(--orange);
    color: #fff;
    text-align: center;
    transition: transform .25s ease;
}

/* Au survol la tuile grossit d'un cinquieme et empiete sur ses voisines : le
   z-index la fait passer au-dessus plutot que dessous. */
.metier:hover {
    z-index: 2;
    transform: scale(1.2);
}

.metier img { width: 78px; margin-bottom: 14px; }

.metier h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* --- page de fiche produit -------------------------------------------------- */

.fiche { padding: 56px 0 84px; }

.fiche__titre {
    margin: 0 0 34px;
    color: var(--orange);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.fiche__corps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: start;
}

/* Les visuels du catalogue ont des largeurs tres inegales et remplissent
   rarement leur colonne : on les centre plutot que de les laisser calees a
   gauche, ce qui creusait un vide variable au milieu de la page. */
.fiche__media { text-align: center; }

.fiche__corps p { margin: 0 0 16px; }
.fiche__corps strong { color: var(--texte-fort); }

/* --- pages annexes ---------------------------------------------------------- */

.page { padding: 44px 0 70px; }

/* Ces pages sont du texte suivi : sur la pleine largeur du site les lignes
   deviennent illisibles. Le conteneur est donc resserre, ce qui degage aussi de
   la marge sur les cotes. */
.page .conteneur { max-width: 1170px; }

.page__titre {
    margin: 0 0 30px;
    color: var(--orange);
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
}

.page--centre { text-align: center; }
/* Le corps de ces pages est centre, mais leur titre reste a gauche. */
.page--centre .page__titre { text-align: left; }

/* Cadre de l'animation « offres associees » : sa hauteur est ajustee au
   chargement par site.js ; cette valeur sert de repli. */
.offres { padding: 10px 0 40px; }

/* L'animation prenait toute la largeur du site (~1490 px) : beaucoup trop
   grande. Elle est ramenee a la largeur de contenu des pages annexes, la meme
   que leur texte. Ses pastilles etant dimensionnees en pourcentage, l'ensemble
   se met a l'echelle sans se chevaucher. */
.offres {
    max-width: 1170px;
    margin: 0 auto;
}

.offres iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 730px;          /* repli : site.js ajuste a la hauteur reelle */
    border: 0;
}

/* Piege a robots du formulaire : hors ecran plutot que display:none, que
   certains robots savent detecter. */
.piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.page hr { margin: 34px 0; border: 0; border-top: 1px solid var(--bordure); }
.page--centre hr { margin: 34px auto; }
.page img { display: block; margin: 26px auto; }
.page h2 { color: var(--texte-fort); font-size: 30px; font-weight: 400; text-transform: uppercase; }

/* Le contenu balise la premiere lettre de ces titres en em pour servir de lettrine,
   pas pour etre lue en italique : on neutralise le rendu plutot que de retoucher le
   contenu, qui est repris verbatim. */
.page h2 em { font-style: normal; }
.page--centre h2 { text-align: center; }

/* --- page de contact --------------------------------------------------------- */

.contact { padding: 44px 0 60px; }

.contact__haut {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.05fr;
    gap: 40px;
    align-items: start;
}

.contact__col h2 {
    margin: 0 0 26px;
    color: var(--texte-fort);
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
}

.contact__ligne { display: flex; gap: 12px; }

/* Sans cette remise a zero, la marge par defaut du <p> (1 em, soit 15 px)
   poussait le texte vers le bas pendant que l'icone restait en haut : les deux
   ne s'alignaient pas. Les 5 px de l'icone la centrent sur la premiere ligne
   (16 px d'icone dans une ligne de 25,5 px). */
.contact__ligne p { margin: 0; }
.contact__ligne svg { flex: none; margin-top: 5px; fill: var(--texte); }

.contact__vcard {
    margin: 6px 0 0 28px;        /* aligne sur le texte, pas sur l'icone */
    font-style: italic;
}

/* Le plan se cale sur la hauteur des colonnes d'informations, sinon il creuse un
   grand vide a leur droite. Le min-height n'est qu'un plancher si ces colonnes
   devenaient tres courtes. */
.contact__carte {
    align-self: stretch;
    width: 100%;
    min-height: 200px;
    border: 0;
    background: var(--fond-bande);   /* visible le temps du chargement */
}

/* Ecran d'attente du plan (voir le commentaire RGPD dans contact.html).
   Le cadre Google n'est insere qu'au clic, en remplacement du voile. */
.carte { position: relative; display: flex; overflow: hidden; }

/* Le cadre Google se pose PAR-DESSUS l'image, qui reste dans le flux : c'est
   elle qui dicte la hauteur du bloc, laquelle ne bouge donc pas au clic.
   Ne pas retirer l'image au chargement du plan. */
.carte iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.carte__plan {
    /* « cover » depuis le centre : l'adresse est au centre de l'image, elle
       reste donc visible quelle que soit la forme de la colonne. */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.carte__epingle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);   /* la pointe de l'epingle sur le point */
    fill: var(--framboise);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
    pointer-events: none;
}

.carte__credit {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 2px 6px;
    font-size: 10px;
    color: #555;
    background: rgba(255, 255, 255, .75);
}

.carte__credit a { color: inherit; }

.carte__voile {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 18px;
    text-align: center;
    background: rgba(242, 242, 242, .6);
    opacity: 0;
    transition: opacity .25s ease;
}

/* Au survol, et au clavier : sans « focus-within » le bouton serait
   atteignable en tabulation mais invisible. */
.carte:hover .carte__voile,
.carte:focus-within .carte__voile { opacity: 1; }

/* Sur ecran tactile il n'y a pas de survol : le voile reste affiche, sinon
   ni le bouton ni la mention Google ne seraient jamais visibles. */
@media (hover: none) {
    .carte__voile { opacity: 1; }
}

.carte__adresse {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--texte-fort);
}

.carte__bouton {
    padding: 9px 20px;
    border: 0;
    font: inherit;
    font-size: 14px;
    color: #fff;
    background: var(--framboise);
    cursor: pointer;
}

.carte__bouton:hover { background: var(--orange-survol); }

.carte__mention {
    /* Volontairement discret mais lisible : c'est l'information qui permet
       au visiteur de choisir, elle ne doit pas etre illisible pour autant. */
    max-width: 34ch;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--texte);
}

.formulaire { margin-top: 10px; }
.formulaire__consigne { margin: 0 0 26px; font-style: italic; }

.formulaire__rangee {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 22px;
}

.champ { display: flex; flex-direction: column; }
.champ label { margin-bottom: 7px; font-size: 15px; }

.champ input,
.champ textarea {
    padding: 9px 12px;
    border: 1px solid var(--bordure);
    font-family: inherit;
    font-size: 15px;
    color: var(--texte-fort);
}

.champ input:focus,
.champ textarea:focus { outline: 2px solid var(--orange); outline-offset: -1px; }

.champ textarea { min-height: 215px; resize: vertical; }

.formulaire__pied {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    margin-top: 22px;
}

.formulaire__envoi {
    padding: 12px 32px;
    background: var(--orange);
    border: 0;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}

.formulaire__envoi:hover { background: #d9552b; }

.formulaire__message { margin-top: 18px; padding: 12px 16px; }
.formulaire__message--ok { background: #e8f4e5; color: #2f6d24; }
.formulaire__message--erreur { background: #fbe6ec; color: #9e0339; }

/* --- pied de page ------------------------------------------------------------ */

.pied { padding: 56px 0 0; background: var(--footer); color: var(--footer-texte); }

.pied__grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.1fr;
    gap: 40px;
    max-width: 1190px;
    margin: 0 auto;
    padding: 0 20px;
}

.pied h2 {
    margin: 0 0 26px;
    font-size: 19px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pied ul { padding: 0; margin: 0; list-style: none; }
.pied li { margin-bottom: 14px; }

.pied a { color: var(--footer-texte); font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }
.pied a:hover { color: #fff; }

.pied__groupe { text-align: center; }
.pied__groupe img { width: 162px; margin: 0 auto 20px; background: #fff; padding: 6px 10px; }
.pied__groupe p { margin: 0; font-size: 15px; }

.pied__bas {
    margin-top: 52px;
    padding: 18px 20px;
    font-size: 13px;
    text-align: center;
}

/* --- retour en haut ------------------------------------------------------------ */

.haut {
    position: fixed;
    right: 34px;
    bottom: 34px;
    z-index: 800;
    display: none;
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid var(--orange);
    color: var(--orange);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.haut--visible { display: block; }
.haut:hover { background: var(--orange); color: #fff; }

/* --- responsive ---------------------------------------------------------------
   Points de rupture repris de la refonte A2000, ou ils se sont averes justes.
------------------------------------------------------------------------------ */

@media (max-width: 1140px) {
    .nav__lien { padding: 12px 10px; font-size: 11px; }
    .diapo__fleche--prec { left: 20px; }
    .diapo__fleche--suiv { right: 20px; }
    .services { gap: 20px; }   /* la remontee est recalculee par site.js */
    .service h3 { font-size: 22px; }
    .catalogue__grille { grid-template-columns: repeat(3, 1fr); }
    .metiers__grille { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    /* le menu horizontal ne tient plus : bascule en panneau deroulant */
    .burger { display: block; }   /* les barres sont en absolu, pas en flux */
    .entete__inner { flex-wrap: wrap; align-items: center; }

    /* en panneau, les entrees ne suivent plus la hauteur de la barre */
    .entete nav { display: block; width: 100%; }
    .nav__item { display: block; }

    /* Le panneau doit defiler SUR LUI-MEME : l'en-tete devient « position:
       fixed » des que le bandeau d'adresse a defile, et un panneau plus haut
       que l'ecran y devenait alors inatteignable — on ne pouvait ni le faire
       defiler ni voir ses dernieres entrees. */
    .nav {
        display: none;
        height: auto;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
        flex-direction: column;
        width: 100%;
        padding-bottom: 12px;
    }

    .nav--ouvert { display: flex; }

    .nav__lien {
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        box-shadow: inset 4px 0 0 var(--couleur-rubrique);
        padding: 14px 16px;
        font-size: 13px;
    }

    .nav__item:last-child .nav__lien { border-right: 0; }

    /* Les six deroulants etaient TOUS ouverts en permanence : le panneau faisait
       une cinquantaine d'entrees, alors que site.js prevoit deja de les deplier
       un par un au premier appui. On les replie donc, et le panneau tient en six
       lignes. (Sans JavaScript le bouton burger n'ouvre deja pas le menu : pas
       de regression.) */
    .nav__sous {
        position: static;
        display: none;
        min-width: 0;
        column-count: 1;
        background: #fff;
        box-shadow: none;
    }

    /* Le survol n'ouvre plus rien ici : sur ecran tactile il se declenche au
       simple effleurement et ouvrait des rubriques au hasard. Seul l'appui,
       gere par site.js, deplie. La classe est doublee pour repasser devant la
       regle de survol du mode bureau, plus specifique. */
    .nav__item:hover .nav__sous { display: none; }
    .nav__item.nav__item--ouvert .nav__sous { display: block; }

    .nav__sous--large { min-width: 0; }
    .nav__sous a { padding: 9px 16px 9px 32px; }

    :root { --hauteur-diapo: 420px; }
    .diapo__legende { left: 50%; }   /* plus la place de decaler le pave */
    .diapo__titre { font-size: 28px; }

    .services { grid-template-columns: repeat(2, 1fr); margin-top: 34px; }
    .bienvenue__haut { grid-template-columns: 1fr; gap: 30px; }
    .fiche__corps { grid-template-columns: 1fr; gap: 26px; }
    .contact__haut { grid-template-columns: repeat(2, 1fr); }
    .contact__carte { grid-column: 1 / -1; min-height: 320px; }
    .pied__grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .bandeau { flex-direction: column; align-items: flex-start; gap: 12px; }
    .bandeau__adresse { font-size: 13px; }
    :root { --hauteur-diapo: 340px; }
    .diapo__titre { font-size: 22px; }
    .diapo__legende { padding: 22px 20px 28px; }
    .diapo__fleche { width: 38px; height: 58px; font-size: 22px; }
    .catalogue__grille { grid-template-columns: repeat(2, 1fr); }
    .metiers__grille { grid-template-columns: repeat(2, 1fr); }
    .formulaire__rangee { grid-template-columns: 1fr; gap: 18px; }
    .contact__haut { grid-template-columns: 1fr; }
    .pied__grille { grid-template-columns: 1fr; text-align: center; }
    .pied__groupe img { margin-top: 10px; }
}

@media (max-width: 480px) {
    .services { grid-template-columns: 1fr; }
    .catalogue__grille { grid-template-columns: 1fr; }
    .metiers__grille { grid-template-columns: 1fr; }
    .bienvenue__titre, .bienvenue__sous { font-size: 24px; }
    .metiers__titre { font-size: 26px; }
    .catalogue__titre { font-size: 22px; }
}

/* Respecte le reglage systeme : plus de fondu ni de defilement anime. */
@media (prefers-reduced-motion: reduce) {
    .diapo__vue { transition: none; }

    /* La legende reste, mais sans glissement ni attente de deux secondes. */
    .diapo__vue--active .diapo__legende { animation: none; }

    .service { transition: none; }
    .metier { transition: none; }
    .metier:hover { transform: none; }
    * { scroll-behavior: auto !important; }
}