/* Socle - Transcourrier site vitrine */

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

body {
    margin: 0;
    background: var(--tc-fond);
    color: var(--tc-gris);
    font-family: var(--tc-police-texte);
    font-size: var(--tc-texte-taille);
    line-height: var(--tc-texte-interligne);
    -webkit-font-smoothing: antialiased;
}

/* Les titres reviennent a la Montserrat, la lineale de la marque, comme dans
   la maquette. La serif avait ete essayee le 18/09 ; a l usage elle ralentit la
   lecture des titres, constate par Lucile le 21/09 sur /reseaux-sociaux. Ce
   retour supprime le cinquieme ecart volontaire : on rejoint la maquette.
   La serif reste ou elle etait avant : le titre geant de l accueil, qui porte sa
   propre regle, et la phrase du bandeau de citation.
   Les intertitres de carte n ont jamais bouge, ils restent en Montserrat. */
h1, h2 {
    font-family: var(--tc-police-texte);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--tc-marine);
    margin: 0 0 var(--tc-espace-s);
}
h3 {
    font-family: var(--tc-police-texte);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--tc-marine);
    margin: 0 0 var(--tc-espace-s);
}

h1 { font-size: var(--tc-titre-page-taille); }
h2 { font-size: var(--tc-titre-section-taille); }
h3 { font-size: 1.25rem; }

/* L orange de la fin de titre n existe que sur les héros, accueil et pages
   intérieures. Les titres de section restent d une seule couleur dans la
   maquette : l accent y est une nuance de graisse, pas de couleur. */
.hero-accueil__titre em, .hero-accueil__titre i {
    font-style: italic;
    color: var(--tc-orange);
}
h1 em, h1 i, h2 em, h2 i, h3 em, h3 i {
    font-style: normal;
    color: inherit;
}

h4, h5, h6 {
    font-family: var(--tc-police-texte);
    font-weight: 600;
    color: var(--tc-noir);
    margin: 0 0 var(--tc-espace-xs);
}

p { margin: 0 0 var(--tc-espace-s); }

a { color: inherit; text-decoration: none; transition: color var(--tc-transition); }
a:hover { color: var(--tc-orange); }

img, video { max-width: 100%; height: auto; display: block; }

/* Surtitre, motif récurrent du bandeau éditorial */
/* Surtitre. La petite capitale interlettrée est devenue le tic de tous les
   sites : on lui préfère la serif de la marque, en bas de casse. Elle ne
   servait jusqu ici qu au titre de l accueil ; elle devient le fil qui relie
   les sections. */
.surtitre {
    display: block;
    font-family: var(--tc-police-titre);
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tc-orange);
    margin-bottom: var(--tc-espace-xs);
}

/* Boutons */
.bouton {
    display: inline-flex;
    align-items: center;
    gap: var(--tc-espace-xs);
    padding: 0.9375rem 2.25rem;
    font-family: var(--tc-police-texte);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--tc-transition), color var(--tc-transition);
}
/* L'orange est réservé aux surtitres. Les boutons sont marine. */
.bouton--principal { background: var(--tc-marine); color: var(--tc-blanc); }
.bouton--principal:hover { background: var(--tc-marine-fonce); color: var(--tc-blanc); }
.bouton--principal:active { background: var(--tc-marine-fonce); }
.bouton--secondaire { background: transparent; color: var(--tc-marine); border-color: var(--tc-marine); }
.bouton--secondaire:hover { background: var(--tc-marine); color: var(--tc-blanc); }
/* Bouton du héros d'accueil : blanc plein sur la vidéo, comme la maquette */
.bouton--blanc { background: var(--tc-blanc); color: var(--tc-noir); font-size: 1.0625rem; }
.bouton--blanc:hover { background: var(--tc-fond-creme); color: var(--tc-noir); }
.bouton--contour { background: transparent; color: var(--tc-blanc); border-color: rgba(255,255,255,0.6); }
.bouton--contour:hover { background: rgba(255,255,255,0.15); color: var(--tc-blanc); }
.bouton--compact { padding: 0.5rem 1.125rem; font-size: 0.875rem; }

/* Conteneur */
.contenu-large { max-width: var(--tc-largeur-max); margin-inline: auto; padding-inline: var(--tc-gouttiere); }

/* En-tête. Comme dans la maquette, il se superpose au héros : transparent en
   haut de page, il prend un fond blanc dès que le visiteur défile. */
.entete {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: transparent;
    transition: background-color var(--tc-transition), box-shadow var(--tc-transition);
}
.entete__interieur {
    position: relative;
    max-width: var(--tc-largeur-max); margin-inline: auto;
    padding: 1rem var(--tc-gouttiere);
    display: flex; align-items: center; justify-content: space-between; gap: var(--tc-espace-m);
}

/* Les onglets sont centrés sur la barre, et non répartis par l'espace
   restant. La maquette, elle, les laisse à 123 pixels à gauche du centre :
   c'est un écart voulu, demandé le 17/09. */
.entete__interieur > .entete__replis .navigation,
.entete .navigation { position: absolute; left: 50%; transform: translateX(-50%); }
.entete__logo img { height: 56px; width: auto; }
.entete__actions { display: flex; align-items: center; gap: 0.625rem; }

.navigation__liste { display: flex; gap: 2.5rem; list-style: none; margin: 0; padding: 0; }
.navigation__element > a { white-space: nowrap; font-size: 0.9375rem; }
.navigation__element--actif > a { color: var(--tc-orange); }
.navigation__bascule { display: none; }

/* Au repos, sur une page qui commence par un visuel sombre : texte clair. */
body:has(.fond-video) .entete:not(.entete--pose):not(.entete--ouvert) .navigation__element > a,
body:has(.hero-page--avec-image) .entete:not(.entete--pose):not(.entete--ouvert) .navigation__element > a { color: var(--tc-blanc); }
body:has(.fond-video) .entete:not(.entete--pose):not(.entete--ouvert) .entete__logo img,
body:has(.hero-page--avec-image) .entete:not(.entete--pose):not(.entete--ouvert) .entete__logo img { filter: brightness(0) invert(1); }

/* Dès le premier défilement, l'en-tête se pose sur un fond blanc. */
body:has(.fond-video) .entete:not(.entete--pose)::before,
body:has(.hero-page--avec-image) .entete:not(.entete--pose)::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(6,18,45,0.5) 0%, rgba(6,18,45,0) 100%);
}

.entete--pose { background: rgba(255, 255, 255, 0.96); box-shadow: 0 1px 0 rgba(12,42,84,0.08); }
.entete--pose .navigation__element > a { color: var(--tc-marine); }
.entete--pose .bouton--contour { color: var(--tc-marine); border-color: rgba(12,42,84,0.3); }
.entete--pose .bouton--blanc { background: var(--tc-marine); color: var(--tc-blanc); }
.entete--pose .bouton--blanc:hover { background: var(--tc-marine-fonce); color: var(--tc-blanc); }

/* Sans visuel sombre derrière, l'en-tête est blanc dès le départ. */
body:not(:has(.fond-video)):not(:has(.hero-page--avec-image)) .entete {
    background: rgba(255, 255, 255, 0.96); box-shadow: 0 1px 0 rgba(12,42,84,0.08);
}
body:not(:has(.fond-video)):not(:has(.hero-page--avec-image)) .navigation__element > a { color: var(--tc-marine); }
body:not(:has(.fond-video)):not(:has(.hero-page--avec-image)) .bouton--contour { color: var(--tc-marine); border-color: rgba(12,42,84,0.3); }
body:not(:has(.fond-video)):not(:has(.hero-page--avec-image)) .entete .bouton--blanc { background: var(--tc-marine); color: var(--tc-blanc); }

@media (max-width: 1400px) {
    .navigation__liste { gap: 1.5rem; }
    .entete__actions .bouton { padding-inline: 1rem; }
}

.pied-de-page { background: var(--tc-marine-fonce); color: var(--tc-blanc); }
.pied-de-page__interieur {
    max-width: var(--tc-largeur-max); margin-inline: auto;
    padding: var(--tc-espace-l) var(--tc-gouttiere);
    display: flex; flex-direction: column; gap: var(--tc-espace-m);
}
.pied-de-page__liens {
    display: flex; flex-wrap: wrap; gap: 0.5rem var(--tc-espace-m);
    list-style: none; margin: 0; padding: 0;
    font-size: 0.9375rem;
}
.pied-de-page__haut { display: flex; flex-wrap: wrap; gap: var(--tc-espace-l); justify-content: space-between; align-items: flex-start; }
.pied-de-page__identite { font-size: 0.9375rem; color: rgba(255,255,255,0.78); max-width: 34ch; }
.pied-de-page__nom { font-weight: 600; color: var(--tc-blanc); margin-bottom: var(--tc-espace-xs); }
.pied-de-page__adresse { font-style: normal; margin-bottom: var(--tc-espace-xs); }
.pied-de-page__contacts { margin-bottom: var(--tc-espace-xs); }
.pied-de-page__identite a { color: rgba(255,255,255,0.86); }
.pied-de-page__identite a:hover { color: var(--tc-orange); }
.pied-de-page__agences { margin: 0; }
.pied-de-page__agences a { text-decoration: underline; text-underline-offset: 3px; }
.pied-de-page__nav { flex: 1; min-width: 18rem; }
.pied-de-page__liens a { color: rgba(255,255,255,0.86); }
.pied-de-page__liens a:hover { color: var(--tc-orange); }
.pied-de-page__mentions {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin: 0; padding-top: var(--tc-espace-m);
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 0.8125rem; color: rgba(255,255,255,0.6);
}
.pied-de-page__mentions a { color: rgba(255,255,255,0.75); text-decoration: underline; text-underline-offset: 3px; }
.pied-de-page__mentions a:hover { color: var(--tc-orange); }

/* Apparition au défilement, reprise de la maquette */
@keyframes tc-apparition {
    from { opacity: 0; transform: translateY(var(--tc-apparition-decalage)); }
    to { opacity: 1; transform: translateY(0); }
}
/* Visible par défaut : sans JavaScript, la page reste lisible.
   Le script ajoute lui-même .tc-apparitions avant de masquer quoi que ce soit. */
.tc-apparitions [data-apparition]:not(.est-visible) { opacity: 0; transform: translateY(var(--tc-apparition-decalage)); }
.tc-apparitions [data-apparition].est-visible {
    opacity: 1; transform: none;
    transition: opacity var(--tc-apparition-duree) ease-out, transform var(--tc-apparition-duree) ease-out;
}

/* Entrée en cascade. La maquette décale chaque élément d'une liste de huit
   centièmes de seconde. Tout est en CSS : le script se contente de poser
   .est-visible sur la section, les enfants suivent. */
.tc-apparitions [data-apparition]:not(.est-visible) .carte,
.tc-apparitions [data-apparition]:not(.est-visible) .agence,
.tc-apparitions [data-apparition]:not(.est-visible) .chiffre,
.tc-apparitions [data-apparition]:not(.est-visible) .etape,
.tc-apparitions [data-apparition]:not(.est-visible) .question,
.tc-apparitions [data-apparition]:not(.est-visible) .mur-logos__element {
    opacity: 0; transform: translateY(12px);
}
.tc-apparitions [data-apparition].est-visible .carte,
.tc-apparitions [data-apparition].est-visible .agence,
.tc-apparitions [data-apparition].est-visible .chiffre,
.tc-apparitions [data-apparition].est-visible .etape,
.tc-apparitions [data-apparition].est-visible .question,
.tc-apparitions [data-apparition].est-visible .mur-logos__element {
    opacity: 1; transform: none;
    transition: opacity var(--tc-apparition-duree) ease-out,
                transform var(--tc-apparition-duree) ease-out;
}
.tc-apparitions [data-apparition].est-visible .carte:nth-child(2),
.tc-apparitions [data-apparition].est-visible .agence:nth-child(2),
.tc-apparitions [data-apparition].est-visible .chiffre:nth-child(2),
.tc-apparitions [data-apparition].est-visible .etape:nth-child(2),
.tc-apparitions [data-apparition].est-visible .question:nth-child(2),
.tc-apparitions [data-apparition].est-visible .mur-logos__element:nth-child(2) { transition-delay: calc(var(--tc-apparition-cascade) * 1); }
.tc-apparitions [data-apparition].est-visible .carte:nth-child(3),
.tc-apparitions [data-apparition].est-visible .agence:nth-child(3),
.tc-apparitions [data-apparition].est-visible .chiffre:nth-child(3),
.tc-apparitions [data-apparition].est-visible .etape:nth-child(3),
.tc-apparitions [data-apparition].est-visible .question:nth-child(3),
.tc-apparitions [data-apparition].est-visible .mur-logos__element:nth-child(3) { transition-delay: calc(var(--tc-apparition-cascade) * 2); }
.tc-apparitions [data-apparition].est-visible .carte:nth-child(4),
.tc-apparitions [data-apparition].est-visible .agence:nth-child(4),
.tc-apparitions [data-apparition].est-visible .chiffre:nth-child(4),
.tc-apparitions [data-apparition].est-visible .etape:nth-child(4),
.tc-apparitions [data-apparition].est-visible .question:nth-child(4),
.tc-apparitions [data-apparition].est-visible .mur-logos__element:nth-child(4) { transition-delay: calc(var(--tc-apparition-cascade) * 3); }
.tc-apparitions [data-apparition].est-visible .carte:nth-child(5),
.tc-apparitions [data-apparition].est-visible .agence:nth-child(5),
.tc-apparitions [data-apparition].est-visible .chiffre:nth-child(5),
.tc-apparitions [data-apparition].est-visible .etape:nth-child(5),
.tc-apparitions [data-apparition].est-visible .question:nth-child(5),
.tc-apparitions [data-apparition].est-visible .mur-logos__element:nth-child(5) { transition-delay: calc(var(--tc-apparition-cascade) * 4); }
.tc-apparitions [data-apparition].est-visible .carte:nth-child(6),
.tc-apparitions [data-apparition].est-visible .agence:nth-child(6),
.tc-apparitions [data-apparition].est-visible .chiffre:nth-child(6),
.tc-apparitions [data-apparition].est-visible .etape:nth-child(6),
.tc-apparitions [data-apparition].est-visible .question:nth-child(6),
.tc-apparitions [data-apparition].est-visible .mur-logos__element:nth-child(6) { transition-delay: calc(var(--tc-apparition-cascade) * 5); }
.tc-apparitions [data-apparition].est-visible .carte:nth-child(7),
.tc-apparitions [data-apparition].est-visible .agence:nth-child(7),
.tc-apparitions [data-apparition].est-visible .chiffre:nth-child(7),
.tc-apparitions [data-apparition].est-visible .etape:nth-child(7),
.tc-apparitions [data-apparition].est-visible .question:nth-child(7),
.tc-apparitions [data-apparition].est-visible .mur-logos__element:nth-child(7) { transition-delay: calc(var(--tc-apparition-cascade) * 6); }
.tc-apparitions [data-apparition].est-visible .carte:nth-child(8),
.tc-apparitions [data-apparition].est-visible .agence:nth-child(8),
.tc-apparitions [data-apparition].est-visible .chiffre:nth-child(8),
.tc-apparitions [data-apparition].est-visible .etape:nth-child(8),
.tc-apparitions [data-apparition].est-visible .question:nth-child(8),
.tc-apparitions [data-apparition].est-visible .mur-logos__element:nth-child(8) { transition-delay: calc(var(--tc-apparition-cascade) * 7); }
.tc-apparitions [data-apparition].est-visible .carte:nth-child(9),
.tc-apparitions [data-apparition].est-visible .agence:nth-child(9),
.tc-apparitions [data-apparition].est-visible .chiffre:nth-child(9),
.tc-apparitions [data-apparition].est-visible .etape:nth-child(9),
.tc-apparitions [data-apparition].est-visible .question:nth-child(9),
.tc-apparitions [data-apparition].est-visible .mur-logos__element:nth-child(9) { transition-delay: calc(var(--tc-apparition-cascade) * 8); }
.tc-apparitions [data-apparition].est-visible .carte:nth-child(10),
.tc-apparitions [data-apparition].est-visible .agence:nth-child(10),
.tc-apparitions [data-apparition].est-visible .chiffre:nth-child(10),
.tc-apparitions [data-apparition].est-visible .etape:nth-child(10),
.tc-apparitions [data-apparition].est-visible .question:nth-child(10),
.tc-apparitions [data-apparition].est-visible .mur-logos__element:nth-child(10) { transition-delay: calc(var(--tc-apparition-cascade) * 9); }
.tc-apparitions [data-apparition].est-visible .carte:nth-child(11),
.tc-apparitions [data-apparition].est-visible .agence:nth-child(11),
.tc-apparitions [data-apparition].est-visible .chiffre:nth-child(11),
.tc-apparitions [data-apparition].est-visible .etape:nth-child(11),
.tc-apparitions [data-apparition].est-visible .question:nth-child(11),
.tc-apparitions [data-apparition].est-visible .mur-logos__element:nth-child(11) { transition-delay: calc(var(--tc-apparition-cascade) * 10); }
.tc-apparitions [data-apparition].est-visible .carte:nth-child(12),
.tc-apparitions [data-apparition].est-visible .agence:nth-child(12),
.tc-apparitions [data-apparition].est-visible .chiffre:nth-child(12),
.tc-apparitions [data-apparition].est-visible .etape:nth-child(12),
.tc-apparitions [data-apparition].est-visible .question:nth-child(12),
.tc-apparitions [data-apparition].est-visible .mur-logos__element:nth-child(12) { transition-delay: calc(var(--tc-apparition-cascade) * 11); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .tc-apparitions [data-apparition]:not(.est-visible) { opacity: 1; transform: none; }
    .tc-apparitions [data-apparition] .carte,
    .tc-apparitions [data-apparition] .agence,
    .tc-apparitions [data-apparition] .chiffre,
    .tc-apparitions [data-apparition] .etape,
    .tc-apparitions [data-apparition] .question,
    .tc-apparitions [data-apparition] .mur-logos__element { opacity: 1; transform: none; transition: none; }
}

/* Accessibilité */
.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; }
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: var(--tc-espace-s); top: var(--tc-espace-s); z-index: 200; background: var(--tc-blanc); padding: var(--tc-espace-xs) var(--tc-espace-s); }

@media (max-width: 820px) {
    .navigation__liste { display: none; }
    .navigation__bascule { display: block; }
}