/* ==========================================================================
   Thème « Méridien » : apparence du site MeridienWeb, d'après sa maquette.
   Chargé après base.css et site.css (voir app/modules/theme-meridien/module.php) :
   il ne change que ce qui diffère. Couleurs : celles de data/site.php (var(--navy)…).
   Les sections propres au site (concept, modèles, processus, appel à l'action) ont leur
   feuille dans le module meridien (assets/modules/meridien/meridien.css).

   Sommaire :
     1. Polices et variables du thème
     2. Composants : titres, boutons, cartes, liens, formulaires, textes mis en forme
     3. En-tête : bandeau d'alerte, pré-header, en-tête et menu
     4. Accueil : une section par partie, dans l'ordre de app/templates/home.php
     5. Pages : pages créées dans l'admin (blocs), actualités, pages légales
     6. Pied de page et barre d'appel sur téléphone

   Tailles d'écran, celles du CMS : 1279 px, 960 px, 720 px (et celles propres à une
   section de site.css, quand on la redessine). Mise en page : flex, jamais grid.
   Code sous licence : usage réservé au site livré, copie et revente interdites (voir LICENCE.md).
   ========================================================================== */

/* ==================================================================== 1. Polices et variables du thème */

/* Figtree (SIL Open Font License), police variable : toutes les graisses de 400 à 800 */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/figtree-latin.woff2') format('woff2'); }

:root {
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cond: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pad: 72px;
  /* Valeurs propres au thème */
  --meridien-radius: 10px;
  --meridien-btn-radius: 6px;
  --meridien-shadow: 0 8px 24px rgba(12, 35, 64, .08);
  --meridien-bleu-moyen: #0B3566;     /* fin du dégradé du haut de page */
  --meridien-orange-fonce: #B54800;   /* survol des boutons orange, petits liens orange (contraste AA) */
  --meridien-champ: #7F8FA5;          /* bord des champs de formulaire (contraste 3:1) */
}

/* L'en-tête n'est pas fixe (voir « En-tête et menu ») : les ancres n'ont pas à l'éviter */
html { scroll-padding-top: 16px; }
body { font-size: 16px; line-height: 1.6; color: var(--ink); }
.skip { background: var(--navy); color: var(--white); }

@media (max-width: 960px) {
  :root { --pad: 64px; }
}
@media (max-width: 720px) {
  :root { --pad: 56px; }
}

/* ==================================================================== 2. Composants */

/* Titres et textes : pas de capitales, Figtree très gras ; mise en valeur en orange */
.kicker { gap: 12px; font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .1em; color: var(--teal); }
.kicker--light { color: var(--teal-light); }
.kicker__bar { display: none; }
.h2 { font-family: var(--sans); font-weight: 800; font-size: 34px; line-height: 1.15; letter-spacing: -.01em; text-transform: none; }
.lead { font-size: 17px; line-height: 1.6; }
.hl, .hl-strong { box-shadow: none; color: var(--yellow); }
.link-underline { gap: 6px; font-family: var(--sans); font-weight: 600; font-size: 15px; text-transform: none; color: var(--meridien-orange-fonce); border-bottom: 0; padding-bottom: 0; }
.link-underline:hover { color: var(--meridien-orange-fonce); text-decoration: underline; }

@media (max-width: 720px) {
  .h2 { font-size: 28px; }
}

/* Boutons : coins arrondis, texte gras sans capitales. --outline : contour bleu en pilule */
.btns { gap: 12px 16px; }
.btn { min-height: 48px; gap: 8px; padding: 12px 24px; border-radius: var(--meridien-btn-radius); font-family: var(--sans); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.btn--yellow { background: var(--yellow); color: var(--white); }
.btn--yellow:hover { background: var(--meridien-orange-fonce); color: var(--white); }
.btn--outline { border-color: var(--teal); border-radius: 32px; color: var(--teal); }
.btn--outline:hover { background: var(--teal); color: var(--white); }
.btn--sm { min-height: 40px; padding: 8px 20px; font-size: 15px; }
/* Texte blanc sur l'orange : 19 px gras au moins (gros texte, contraste AA de 3:1) */
.btn--yellow.btn--sm { font-size: 19px; }

/* Carte (blocs, catalogue) */
.card__img { border-radius: var(--meridien-radius); }
.card__title { font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1.15; text-transform: none; }
.card__text { font-size: 15px; line-height: 1.6; }

/* Texte mis en forme dans l'admin */
.prose { font-size: 16px; }
.prose h2 { font-family: var(--sans); font-weight: 800; font-size: 24px; line-height: 1.2; text-transform: none; }
.prose h3 { font-family: var(--sans); font-weight: 700; font-size: 19px; }
.prose a { color: var(--meridien-orange-fonce); text-decoration: underline; }

/* Vidéo, photo en grand */
.video { border-radius: var(--meridien-radius); }
.video__play { background: var(--yellow); color: var(--white); }
.lightbox__caption { font-family: var(--sans); font-weight: 600; font-size: 17px; text-transform: none; }

/* Formulaires : champs arrondis, bord gris bleu, halo bleu au focus */
.form__title { font-family: var(--sans); font-weight: 800; font-size: 24px; text-transform: none; }
.field label { font-size: 15px; }
.field input, .field select, .field textarea { border: 1.5px solid var(--meridien-champ); border-radius: var(--meridien-btn-radius); font-size: 16px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(29, 79, 134, .25); }
.form__status { border-radius: var(--meridien-btn-radius); }

/* Image à venir : rayures bleutées */
.placeholder { background: repeating-linear-gradient(135deg, var(--sand) 0 12px, var(--line) 12px 24px); font-family: var(--sans); font-size: 14px; }

/* ==================================================================== 3. En-tête (app/templates/layout.php) */

/* ---------- Bandeau d'alerte (groupe bandeau), 4 thèmes choisis dans l'admin */

.alert { font-size: 15px; }
.alert__title { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: 0; text-transform: none; }
.alert--info .alert__title { color: var(--teal-light); }
/* « Attention » : fond orange très clair (le texte bleu nuit sur l'orange n'atteindrait pas le contraste AA) */
.alert--attention { background: var(--yellow-soft); color: var(--navy); border-bottom: 3px solid var(--yellow); }

/* ---------- Pré-header : absent de la maquette, masqué. Téléphone et horaires restent dans
   le pied de page, la partie formulaires et la barre d'appel sur téléphone. */

.preheader { display: none; }

/* ---------- En-tête et menu (groupe menu) : logo avec son médaillon, menu, bouton orange.
   Le médaillon (décor, image du thème) déborde de l'en-tête sur le haut de page : l'en-tête
   n'est donc pas fixe, sinon le médaillon cacherait le contenu au défilement. */

.header { position: relative; border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
.header__in { min-height: 68px; padding-top: 0; padding-bottom: 0; gap: 14px 24px; }
.logo { position: relative; display: inline-flex; align-items: center; min-height: 68px; padding-left: 156px; font-family: var(--sans); font-weight: 800; font-size: 30px; letter-spacing: -.02em; text-transform: none; }
.logo .hl { color: var(--yellow); }
.logo::before { content: ''; position: absolute; top: 10px; left: 0; z-index: 2; width: 144px; height: 144px; padding: 12px; border: 2px solid var(--yellow); border-radius: 50%; background: var(--white) url('img/medaillon.svg') no-repeat center / contain; background-origin: content-box; box-shadow: 0 0 0 5px var(--white), 0 0 0 10px rgba(255, 255, 255, .14), 0 16px 32px rgba(6, 26, 51, .35); transition: transform .3s; }
.logo:hover::before { transform: rotate(-4deg) scale(1.03); }
.nav { justify-content: flex-end; gap: 8px 20px; font-family: var(--sans); font-weight: 500; font-size: 15px; text-transform: none; }
.nav__link { padding: 8px 0; border-bottom: 0; color: var(--navy); white-space: nowrap; }
.nav__link:hover, .nav__link.is-active { color: var(--meridien-orange-fonce); }
.nav .btn { min-height: 48px; white-space: nowrap; padding: 12px 20px; font-size: 19px; }

/* Écran moyen : comme dans la maquette, le médaillon (qui porte le nom) suffit ; le nom écrit
   reste dans la page pour Google et les lecteurs d'écran, mais il laisse sa place au menu */
@media (min-width: 961px) and (max-width: 1279px) {
  .header__in { gap: 14px 20px; }
  .logo { padding-left: 124px; font-size: 0; }
  .logo::before { width: 120px; height: 120px; padding: 10px; }
  .nav { gap: 8px 16px; font-size: 15px; }
  .nav .btn { padding: 10px 14px; font-size: 19px; }
}

@media (max-width: 960px) {
  .logo { padding-left: 108px; font-size: 24px; }
  .logo::before { top: 8px; width: 96px; height: 96px; padding: 8px; box-shadow: 0 0 0 4px var(--white), 0 0 0 8px rgba(255, 255, 255, .14), 0 12px 24px rgba(6, 26, 51, .3); }
  /* Menu déroulé : sous l'en-tête, en laissant la place du médaillon */
  .nav { padding: 48px 24px 20px; box-shadow: 0 12px 24px rgba(12, 35, 64, .12); }
  .nav__link { padding: 11px 0; border-bottom: 1px solid var(--line); }
  .nav__link:hover, .nav__link.is-active { border-bottom-color: var(--line); color: var(--meridien-orange-fonce); }
}

@media (max-width: 720px) {
  .logo { min-width: 0; padding-left: 84px; font-size: 20px; }
  .logo::before { width: 72px; height: 72px; padding: 6px; box-shadow: 0 0 0 3px var(--white), 0 8px 16px rgba(6, 26, 51, .3); }
  .nav { padding-top: 32px; }
}

/* ==================================================================== 4. Accueil (app/templates/home/) */

/* ---------- Haut de page (groupe hero) : fond bleu nuit en dégradé, texte blanc à gauche, visuel
   fondu à droite (sous le texte, sous 1280 px), vague blanche en bas. La place du bas
   (padding-bottom) reçoit le bandeau d'arguments, remonté par-dessus (voir la partie suivante). */

.hero--light { position: relative; flex-wrap: nowrap; min-height: 576px; padding-bottom: 160px; background: linear-gradient(120deg, var(--navy-dark) 0%, var(--meridien-bleu-moyen) 60%); color: var(--pale-2); }
.hero--light::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; height: 88px; background: url('img/vague.svg') no-repeat center bottom / 100% 100%; }
.hero--light > .hero--light__text { position: relative; z-index: 1; flex: 1 1 100%; gap: 0; justify-content: center; padding: 108px 24px 0 max(24px, calc((100vw - 1200px) / 2 + 24px)); }
.hero--light__text > * { max-width: min(560px, 37vw); }
.hero--light > .hero--light__media { position: absolute; top: 0; right: 0; bottom: 0; left: 42%; min-height: 0; background: transparent; }
.hero--light__media .hero__img { object-position: right center; -webkit-mask-image: linear-gradient(to right, transparent, #000 30%); mask-image: linear-gradient(to right, transparent, #000 30%); }
.hero .kicker { margin-bottom: 12px; color: var(--teal-light); }
.hero__title { margin-bottom: 12px; font-family: var(--sans); font-weight: 800; font-size: clamp(44px, 3.6vw, 60px); line-height: 1.08; letter-spacing: -.02em; text-transform: none; color: var(--white); }
.hero__title .hl-strong { display: block; }
.hero__text { max-width: 544px; margin-bottom: 16px; font-size: 17px; line-height: 1.6; }
.hero .btns { margin-top: 12px; }
/* Bouton du téléphone (s'il est saisi) : contour blanc arrondi */
.hero .btn--outline { border-color: var(--white); color: var(--white); }
.hero .btn--outline:hover { background: var(--white); color: var(--navy); }

/* Tablette et écran moyen : le visuel passe sous le texte, fondu par le haut */
@media (max-width: 1279px) {
  .hero--light { flex-direction: column; min-height: 0; padding-bottom: 120px; }
  .hero--light::after { height: 64px; }
  .hero--light > .hero--light__text { flex: none; padding: 108px 24px 0; max-width: 1200px; width: 100%; margin: 0 auto; }
  .hero--light__text > * { max-width: 560px; }
  .hero--light__text > .hero__title { max-width: 640px; font-size: clamp(34px, 8vw, 60px); }
  .hero--light > .hero--light__media { position: relative; left: auto; flex: none; height: 50vw; max-height: 512px; min-height: 240px; margin-top: 32px; }
  .hero--light__media .hero__img { object-position: 85% center; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%); }
}

@media (max-width: 960px) {
  .hero--light > .hero--light__text { padding-top: 64px; }
}

@media (max-width: 720px) {
  .hero--light { padding-bottom: 140px; }
  .hero--light::after { height: 40px; }
  .hero--light > .hero--light__text { padding-top: 52px; }
  .hero--light > .hero--light__media { order: 0; height: 64vw; min-height: 0; }
  .hero .btns .btn { width: 100%; }
}

/* ---------- Bandeau d'arguments (groupe reassurance) : les coches du haut de page. Remonté
   dans la place réservée en bas du haut de page (même hauteur que padding-bottom ci-dessus),
   fond transparent, aligné sur le texte. Seul après une autre partie, il garde un fond bleu. */

.reassurance { background: var(--navy-dark); color: var(--pale-2); }
.reassurance__list { gap: 6px 20px; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: 0; text-transform: none; }
.reassurance__list li { flex: none; gap: 6px; }
.reassurance__icon { width: 16px; height: 16px; color: var(--teal-light); }
.dot { border-radius: 50%; background: var(--teal-light); }

.hero--light + .reassurance { position: relative; z-index: 1; height: 160px; margin-top: -160px; background: transparent; }
.hero--light + .reassurance .reassurance__list { max-width: calc(min(560px, 37vw) + 48px); margin-left: max(0px, calc((100vw - 1200px) / 2)); padding-top: 12px; padding-bottom: 0; }

@media (max-width: 1279px) {
  .hero--light + .reassurance { height: 120px; margin-top: -120px; }
  .hero--light + .reassurance .reassurance__list { max-width: 1200px; margin-left: auto; padding-top: 16px; }
}
@media (max-width: 720px) {
  .hero--light + .reassurance { height: 140px; margin-top: -140px; }
}

/* ---------- Présentation, le mot du gérant (groupe edito) : photo arrondie, pastille orange claire */

.edito__deco { border-radius: var(--meridien-radius); background: var(--yellow-soft); }
.edito__frame { border-radius: var(--meridien-radius); box-shadow: var(--meridien-shadow); }
.edito__sign strong { font-family: var(--sans); font-weight: 700; font-size: 18px; text-transform: none; }
.edito__sign span { font-size: 15px; }

/* ---------- Services (groupe services) : cartes blanches arrondies et ombrées */

.services { gap: 24px; background: none; border: 0; }
.service { flex-basis: calc((100% - 48px) / 3 - 1px); max-width: calc((100% - 48px) / 3); padding: 28px 24px; border-radius: var(--meridien-radius); background: var(--white); box-shadow: var(--meridien-shadow); }
.service:hover { background: var(--white); box-shadow: 0 12px 32px rgba(12, 35, 64, .14); }
.service__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--yellow-soft); color: var(--yellow); }
.service__icon .icon { width: 28px; height: 28px; }
.service:hover .service__icon { background: var(--yellow); color: var(--white); }
div.service:hover { box-shadow: var(--meridien-shadow); }
div.service:hover .service__icon { background: var(--yellow-soft); color: var(--yellow); }
.service__n { font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--teal); }
.service__title { font-family: var(--sans); font-weight: 700; font-size: 20px; line-height: 1.15; text-transform: none; }
.service__text { font-size: 15px; line-height: 1.6; color: var(--ink); }
.service__more { gap: 6px; font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--meridien-orange-fonce); }
.service__more .icon { color: var(--meridien-orange-fonce); }

/* Mêmes largeurs de colonnes que site.css, avec l'écart de 24 px */
@media (max-width: 1075px) {
  .service { flex-basis: calc((100% - 24px) / 2 - 1px); max-width: calc((100% - 24px) / 2); }
}
@media (max-width: 733px) {
  .service { flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 720px) {
  .service { padding: 24px 20px; }
  .service__title { font-size: 19px; }
}

/* ---------- Engagements (groupe engagements) : comme « Notre concept », colonnes centrées,
   séparées par un trait, icône dans une pastille ronde */

#engagements .section__titles { align-items: center; margin: 0 auto; text-align: center; }
.engagements { gap: 32px 0; }
.engagement { align-items: center; gap: 8px; padding: 0 16px; border-top: 0; text-align: center; }
.engagement + .engagement { border-left: 1px solid var(--line); }
/* Pas de trait devant la première colonne d'une ligne (4 colonnes, puis 3 sous 1144 px) */
.engagement:nth-child(4n+1) { border-left: 0; }
.engagement__icon { width: 72px; height: 72px; margin-bottom: 8px; border-radius: 50%; background: var(--yellow-soft); color: var(--yellow); }
.engagement__icon .icon { width: 34px; height: 34px; }
.engagement:nth-child(4n+2) .engagement__icon { background: var(--line); color: var(--teal); }
.engagement:nth-child(4n+3) .engagement__icon { background: var(--sand); color: var(--navy); }
.engagement__title { font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 1.15; text-transform: none; }
.engagement__text { max-width: 256px; font-size: 16px; color: var(--ink); }

@media (max-width: 1143px) {
  .engagement:nth-child(4n+1) { border-left: 1px solid var(--line); }
  .engagement:first-child, .engagement:nth-child(3n+1) { border-left: 0; }
}
@media (max-width: 861px) {
  .engagement + .engagement { border-left: 0; }
}

/* ---------- Réalisations (groupe realisations) : photos arrondies, légende sobre */

.gallery__link { border-radius: var(--meridien-radius); }
.gallery__title { font-family: var(--sans); font-weight: 700; font-size: 18px; text-transform: none; }
.gallery__place { font-size: 15px; }

/* ---------- Actualités (groupe actus) : cartes blanches arrondies et ombrées */

.news-card { overflow: hidden; border: 0; border-radius: var(--meridien-radius); box-shadow: var(--meridien-shadow); }
.news-card__date, .news-item__date { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .1em; }
.news-card__title { font-family: var(--sans); font-weight: 700; font-size: 20px; line-height: 1.2; text-transform: none; }
.news-card__text { font-size: 15px; color: var(--ink); }
.news-card__more { font-family: var(--sans); font-weight: 600; font-size: 15px; text-transform: none; color: var(--meridien-orange-fonce); }
.news-card__more:hover { color: var(--meridien-orange-fonce); text-decoration: underline; }
.news-item__media { overflow: hidden; border-radius: var(--meridien-radius); }

/* ---------- Zone d'intervention (groupe zone) : fond bleu nuit en dégradé, carte arrondie */

.zone { background: linear-gradient(120deg, var(--navy-dark) 0%, var(--meridien-bleu-moyen) 100%); }
.zone__text { font-size: 17px; }
.zone__group strong { font-family: var(--sans); font-weight: 700; font-size: 18px; text-transform: none; color: var(--teal-light); }
.zone__group span { font-size: 16px; }
.zone__map { border: 1px solid var(--navy-line); border-radius: var(--meridien-radius); }

/* ---------- Formulaires (groupe contact) : bandeau d'appel sombre et arrondi (masqué sur ce site,
   remplacé par la section « Appel à l'action » du module), puis les formulaires dans une carte */

.cta { border-radius: 48px 48px 0 0; background: linear-gradient(120deg, var(--navy-dark) 0%, var(--meridien-bleu-moyen) 100%); }
.cta__text { color: var(--pale-2); font-size: 17px; }
.cta__title { font-family: var(--sans); font-weight: 800; font-size: clamp(30px, 4vw, 40px); line-height: 1.15; text-transform: none; color: var(--white); }
.cta .btn--navy { background: var(--yellow); color: var(--white); }
.cta .btn--navy:hover { background: var(--meridien-orange-fonce); color: var(--white); }
.cta .btn--outline { border-color: var(--white); color: var(--white); }
.cta .btn--outline:hover { background: var(--white); color: var(--navy); }

.forms__icon { padding: 10px; border: 0; border-radius: 50%; background: var(--yellow-soft); color: var(--yellow); }
.forms__details { border-top-color: var(--line); }
.forms__details span { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .1em; }
.forms__details a { font-size: 17px; }
.forms__box { overflow: hidden; border: 0; border-radius: var(--meridien-radius); box-shadow: var(--meridien-shadow); }
.tabs__btn { font-family: var(--sans); font-weight: 700; font-size: 16px; text-transform: none; }
.tabs__btn.is-active { color: var(--navy); border-bottom-color: var(--yellow); }
.form .btn--navy { background: var(--yellow); color: var(--white); }
.form .btn--navy:hover { background: var(--meridien-orange-fonce); color: var(--white); }
.field--check a { color: var(--teal); text-decoration: underline; }

@media (max-width: 960px) {
  .cta { border-radius: 32px 32px 0 0; }
}

/* ==================================================================== 5. Pages */

/* ---------- Toutes les pages autres que l'accueil : un peu plus d'espace en haut, pour que le
   médaillon du logo (qui déborde de l'en-tête) ne touche pas le fil d'Ariane */

body:not(.page-home) #main { padding-top: 40px; }

@media (max-width: 960px) {
  body:not(.page-home) #main { padding-top: 0; }
}

/* ---------- Pages créées dans l'admin (groupe pages) : blocs */

.block__title { font-family: var(--sans); font-weight: 800; font-size: clamp(24px, 2.8vw, 30px); line-height: 1.15; text-transform: none; }
.block__media .block__img, .block__photo .block__zoom, .block--image .block__img { border-radius: var(--meridien-radius); }
.block__caption { font-size: 15px; }

/* Bouton d'action : panneau bleu nuit arrondi, bouton orange */
.block--action { border-radius: var(--meridien-radius); background: linear-gradient(120deg, var(--navy-dark) 0%, var(--meridien-bleu-moyen) 100%); color: var(--pale-2); }
.block--action .block__title { color: var(--white); }
.block--action .prose { font-size: 17px; }
.block--action .btn--navy { background: var(--yellow); color: var(--white); }
.block--action .btn--navy:hover { background: var(--meridien-orange-fonce); color: var(--white); }
.block--action .btn--outline { border-color: var(--white); color: var(--white); }
.block--action .btn--outline:hover { background: var(--white); color: var(--navy); }

/* Questions / réponses, avis, tarifs, accès */
.faq { overflow: hidden; border: 1px solid var(--line); border-radius: var(--meridien-radius); }
.faq__question { font-family: var(--sans); font-weight: 700; font-size: 18px; }
.review { border-radius: 0 var(--meridien-radius) var(--meridien-radius) 0; }
.prices__heading { font-family: var(--sans); font-weight: 700; font-size: 18px; text-transform: none; }
.access .icon { color: var(--yellow); }
.block__map { border: 1px solid var(--line); border-radius: var(--meridien-radius); }

@media (max-width: 720px) {
  .faq__question { font-size: 17px; }
}

/* ==================================================================== 6. Pied de page (app/templates/layout.php) */

/* ---------- Pied de page (groupes entreprise et footer) : nom avec son médaillon, colonnes */

.footer { border-top: 1px solid var(--navy-line); font-size: 15px; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__grid { padding-top: 48px; padding-bottom: 40px; gap: 32px; }
.footer__col:first-child { flex: 2 1 320px; }
.footer__col:first-child > span:not(.footer__logo) { max-width: 352px; }
.footer__logo { display: inline-flex; align-items: center; gap: 0; margin-bottom: 12px; font-family: var(--sans); font-weight: 800; font-size: 24px; letter-spacing: -.02em; text-transform: none; }
.footer__logo::before { content: ''; width: 72px; height: 72px; margin-right: 12px; padding: 6px; border: 2px solid var(--yellow); border-radius: 50%; background: var(--white) url('img/medaillon.svg') no-repeat center / contain; background-origin: content-box; box-shadow: 0 0 0 4px rgba(255, 255, 255, .14); }
.footer__logo span { color: var(--yellow); }
.footer__title { margin-bottom: 8px; font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.footer .footer__tel { color: var(--pale); font-weight: 400; }
.footer__line .icon { color: var(--yellow); }
.footer__bottom { padding-top: 20px; padding-bottom: 24px; font-size: 13px; }

/* ---------- Barre d'appel sur téléphone : appeler, et bouton vers les formulaires */

@media (max-width: 720px) {
  .callbar { box-shadow: 0 -4px 16px rgba(12, 35, 64, .2); }
  .callbar__btn { font-family: var(--sans); font-weight: 700; font-size: 19px; letter-spacing: 0; text-transform: none; }
  .callbar__btn--quote { color: var(--white); }
  .callbar__btn--quote:hover { color: var(--white); }
}