/* ==========================================================================
   Site : le style propre à chaque partie du site. S'appuie sur base.css (charte,
   grille, composants), chargé avant lui.

   Une section par partie, dans l'ordre de la page. Chaque section porte le nom du
   groupe de app/schema.php (son onglet dans l'admin) et de son gabarit : pour trouver
   le style d'une partie, chercher « groupe edito ». Chaque section contient aussi ses
   règles pour les écrans plus petits : tablette (960 px) et téléphone (720 px), comme dans
   base.css ; et, pour les cartes en colonnes, la largeur où une colonne de plus ne tient plus.

   Sommaire :
     En-tête : bandeau d'alerte, pré-header, en-tête et menu
     Accueil : haut de page, bandeau d'arguments, présentation, services, engagements,
               réalisations, actualités, zone d'intervention, formulaires
     Pages   : pages légales, pages créées dans l'admin et leurs blocs
     Pied de page : pied de page, barre d'appel sur téléphone
   Code sous licence : usage réservé au site livré, copie et revente interdites (voir LICENCE.md).
   ========================================================================== */

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

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

.alert { font-size: 16px; line-height: 1.45; }
.alert__in { padding-top: 12px; padding-bottom: 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; justify-content: center; text-align: center; }
.alert__title { font-family: var(--cond); font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: .03em; }
.alert__link { font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.alert__link:hover { color: inherit; text-decoration-thickness: 2px; }
.alert__icon { width: 20px; height: 20px; align-self: center; }
.alert--info { background: var(--navy); color: var(--white); border-bottom: 1px solid var(--navy-line); }
.alert--info .alert__title { color: var(--yellow); }
.alert--attention { background: var(--yellow); color: var(--navy); }
.alert--important { background: #B4231A; color: var(--white); }
.alert--promo { background: #1F6B3A; color: var(--white); }

/* ---------- Pré-header : téléphone, horaires, lien vers les formulaires */

.preheader { background: var(--navy-dark); color: var(--pale); font-size: 15px; }
.preheader__in { padding-top: 9px; padding-bottom: 9px; display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: center; justify-content: space-between; }
.preheader__infos { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: center; }
.preheader__infos > * { display: inline-flex; gap: 8px; align-items: center; }
.preheader__infos .icon { color: var(--yellow); }
.preheader__tel { color: var(--yellow); font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.preheader__tel:hover { color: var(--yellow); }
.preheader__urgent { color: var(--white); }
.preheader__contact { color: var(--white); font-weight: 600; }
.preheader__contact:hover { color: var(--yellow); }

@media (max-width: 720px) {
  .preheader__hours, .preheader__contact { display: none; }
  .preheader__in { justify-content: center; }
}

/* ---------- En-tête et menu (groupe menu) : logo, menu, bouton « menu » sur tablette et téléphone */

.header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.header__in { padding-top: 16px; padding-bottom: 16px; display: flex; gap: 14px 32px; align-items: center; justify-content: space-between; }
.logo { font-family: var(--cond); font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; color: var(--navy); }
.logo:hover { text-decoration: none; color: var(--navy); }
.logo__img { max-height: 52px; width: auto; }
.nav { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; font-family: var(--cond); font-weight: 600; font-size: 19px; text-transform: uppercase; }
.nav__link { color: var(--ink); border-bottom: 3px solid transparent; padding-bottom: 2px; }
.nav__link:hover { text-decoration: none; color: var(--navy); border-bottom-color: var(--yellow); }
.nav__link.is-active { color: var(--navy); border-bottom-color: var(--yellow); }
.burger { display: none; background: none; border: 0; padding: 10px; margin: -10px -10px -10px 0; cursor: pointer; }
.burger__bars, .burger__bars::before, .burger__bars::after { display: block; width: 26px; height: 3px; background: var(--navy); position: relative; transition: transform .2s, background .2s; }
.burger__bars::before, .burger__bars::after { content: ''; position: absolute; left: 0; }
.burger__bars::before { top: -8px; }
.burger__bars::after { top: 8px; }
.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after { transform: translateY(-8px) rotate(-45deg); }

/* Ordinateur à écran moyen : menu un peu resserré pour tenir sur une ligne (voir Menu::MAX_LINKS) */
@media (min-width: 961px) and (max-width: 1279px) {
  .header__in { gap: 14px 24px; }
  .nav { gap: 8px 18px; font-size: 17px; }
  .nav .btn--sm { font-size: 17px; padding: 9px 14px; }
}

@media (max-width: 960px) {
  .burger { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(14,42,71,.12); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; }
  .nav.is-open { display: flex; }
  .nav__link { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav__link:hover, .nav__link.is-active { border-bottom-color: var(--line); color: var(--teal); }
  .nav .btn { margin-top: 16px; }
  .header__in { position: relative; }
}

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

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

/* ---------- Haut de page (groupe hero) */

.hero--light { background: var(--sand); display: flex; flex-wrap: wrap; min-height: clamp(460px, 68vh, 680px); }
.hero--light > * { flex: 1 1 460px; min-width: 0; }
.hero--light__text { padding: clamp(48px, 8vh, 96px) clamp(24px, 4vw, 56px) 56px max(24px, calc((100vw - 1200px) / 2 + 24px)); display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.hero--light__media { position: relative; min-height: 340px; overflow: hidden; background: var(--navy) linear-gradient(135deg, var(--navy) 0%, #0A2A5E 100%); }
.hero--light__media .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__title { font-family: var(--cond); font-weight: 800; font-size: clamp(40px, 5.6vw, 74px); line-height: .95; text-transform: uppercase; color: var(--navy); text-wrap: balance; }
.hero__text { max-width: 500px; font-size: 20px; line-height: 1.5; text-wrap: pretty; }
.hero .btns { margin-top: 6px; }

@media (max-width: 720px) {
  .hero--light__media { min-height: 260px; order: -1; }
  .hero--light__text { padding-top: 36px; padding-bottom: 44px; }
  .hero__text { font-size: 18px; }
}

/* ---------- Bandeau d'arguments (groupe reassurance) */

.reassurance { background: var(--navy); color: var(--white); }
.reassurance__list { list-style: none; margin: 0 auto; padding-top: 22px; padding-bottom: 22px; display: flex; flex-wrap: wrap; gap: 14px 28px; font-family: var(--cond); font-weight: 600; font-size: 19px; text-transform: uppercase; letter-spacing: .03em; }
.reassurance__list li { flex: 1 1 200px; display: flex; gap: 12px; align-items: center; }
.reassurance__icon { width: 26px; height: 26px; color: var(--yellow); }
.dot { width: 8px; height: 8px; background: var(--yellow); flex: none; }

/* ---------- Présentation, le mot du gérant (groupe edito) */

.edito__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: clamp(32px, 5vw, 72px); align-items: center; }
.edito__grid > * { flex: 1 1 420px; min-width: 0; }
/* Deux colonnes égales (photo, texte), l'une sous l'autre sous 960 px environ.
   Photo : 420 px au moins, marge du cadre jaune (14 px) comprise ; au plus 496 px, pour garder
   le format 4:5 à sa hauteur maximale (620 px). Texte : au plus la largeur d'une colonne
   (moitié de la largeur, moins la moitié de l'écart). */
.edito__grid > .edito__media { flex-basis: 406px; max-width: 496px; }
.edito__grid > .edito__text { max-width: calc(50% - clamp(16px, 2.5vw, 36px)); }
.edito__media { position: relative; aspect-ratio: 4 / 5; max-height: 620px; margin-left: 14px; margin-bottom: 14px; }
.edito__deco { position: absolute; left: -14px; bottom: -14px; width: 45%; height: 45%; background: var(--yellow); }
.edito__frame { position: relative; width: 100%; height: 100%; overflow: hidden; }
.edito__img { width: 100%; height: 100%; object-fit: cover; }
.edito__text { display: flex; flex-direction: column; gap: 20px; }
.edito__sign { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; }
.edito__sign strong { font-family: var(--cond); font-weight: 700; font-size: 22px; text-transform: uppercase; color: var(--navy); }
.edito__sign span { font-size: 16px; color: var(--muted); }

@media (max-width: 960px) {
  .edito__grid > .edito__text { max-width: none; }
}

@media (max-width: 720px) {
  .edito__media { max-height: 460px; }
  .edito__grid > .edito__media { max-width: 368px; } /* format 4:5 à 460 px de haut */
}

/* ---------- Services (groupe services) */

.services { display: flex; flex-wrap: wrap; gap: 2px; background: var(--line); border: 2px solid var(--line); }
.service { flex: 1 1 calc((100% - 4px) / 3 - 1px); max-width: calc((100% - 4px) / 3); min-width: 0; background: var(--white); padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; color: var(--ink); transition: background .15s; }
.service:hover { background: var(--yellow-soft); text-decoration: none; color: var(--ink); }
.service__top { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.service__icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--yellow); transition: background .15s, color .15s; }
.service__icon .icon { width: 30px; height: 30px; }
.service:hover .service__icon { background: var(--yellow); color: var(--navy); }
.service__n { font-family: var(--cond); font-weight: 700; font-size: 18px; color: var(--teal); }
.service__more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--cond); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); }
.service__more .icon { color: var(--teal); transition: transform .15s; }
.service:hover .service__more .icon { transform: translateX(4px); }
.service__title { font-family: var(--cond); font-weight: 700; font-size: 27px; line-height: 1.05; text-transform: uppercase; color: var(--navy); }
.service__text { font-size: 17px; line-height: 1.55; color: var(--muted); }
/* Carte sans lien (partie formulaires masquée et aucune page liée) : pas d'effet au survol */
div.service:hover { background: var(--white); }
div.service:hover .service__icon { background: var(--navy); color: var(--yellow); }

/* Colonnes : autant que la largeur en permet, 340 px au moins par carte. Chaque carte grandit
   jusqu'à la largeur de sa colonne (max-width), sans plus : une dernière ligne incomplète garde
   des cartes de la même taille que les autres. Même principe pour les réalisations (340 px),
   les actualités (320 px) et les engagements (250 px). */
@media (max-width: 1075px) {
  .service { flex-basis: calc((100% - 2px) / 2 - 1px); max-width: calc((100% - 2px) / 2); }
}
@media (max-width: 733px) {
  .service { flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 720px) {
  .service { padding: 26px 22px; }
  .service__title { font-size: 24px; }
}

/* ---------- Engagements (groupe engagements) */

.engagements { display: flex; flex-wrap: wrap; gap: 32px; }
.engagement { flex: 1 1 250px; min-width: 0; display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--navy); padding-top: 20px; }
/* Engagements plus nombreux que les colonnes (4 sur ordinateur, 3 puis 2 sur écran plus étroit) :
   chacun garde la largeur d'une colonne, pour que celui qui passe seul à la ligne ne s'étire pas.
   « .engagement:nth-last-child(n+5) » : tous les engagements, s'il y en a au moins 5. */
.engagement:nth-last-child(n+5), .engagement:nth-last-child(n+5) ~ .engagement { max-width: calc((100% - 96px) / 4); }
.engagement__icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--yellow); color: var(--navy); margin-bottom: 4px; }
.engagement__icon .icon { width: 26px; height: 26px; }
.engagement__title { font-family: var(--cond); font-weight: 700; font-size: 24px; line-height: 1.1; text-transform: uppercase; color: var(--navy); }
.engagement__text { font-size: 17px; line-height: 1.55; color: var(--muted); }

@media (max-width: 1143px) {
  .engagement:nth-last-child(n+4), .engagement:nth-last-child(n+4) ~ .engagement { max-width: calc((100% - 64px) / 3); }
}
@media (max-width: 861px) {
  .engagement:nth-last-child(n+3), .engagement:nth-last-child(n+3) ~ .engagement { max-width: calc((100% - 32px) / 2); }
}
@media (max-width: 579px) {
  .engagement:nth-last-child(n+3), .engagement:nth-last-child(n+3) ~ .engagement { max-width: none; }
}

/* ---------- Réalisations (groupe realisations) */

.gallery { display: flex; flex-wrap: wrap; gap: 24px; }
.gallery__item { flex: 1 1 calc((100% - 48px) / 3 - 1px); max-width: calc((100% - 48px) / 3); min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.gallery__link { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--line); }
.gallery__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery__link.placeholder { display: flex; }
a.gallery__link:hover .gallery__img { transform: scale(1.04); }
.gallery__item figcaption { display: flex; flex-direction: column; gap: 2px; }
.gallery__title { font-family: var(--cond); font-weight: 700; font-size: 22px; line-height: 1.1; text-transform: uppercase; color: var(--navy); }
.gallery__place { font-size: 16px; color: var(--muted); }

@media (max-width: 1115px) {
  .gallery__item { flex-basis: calc((100% - 24px) / 2 - 1px); max-width: calc((100% - 24px) / 2); }
}
@media (max-width: 751px) {
  .gallery__item { flex-basis: 100%; max-width: 100%; }
}

/* ---------- Actualités (groupe actus) : sur l'accueil, page des actualités et page d'une actu */

.news { display: flex; flex-wrap: wrap; gap: 28px; }
.news-card { flex: 1 1 calc((100% - 56px) / 3 - 1px); max-width: calc((100% - 56px) / 3); min-width: 0; display: flex; flex-direction: column; background: var(--white); border: 2px solid var(--line); }
.news-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--line); }
.news-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.news-card__media:hover .news-card__img { transform: scale(1.04); }
.news-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; flex: 1; }
.news-card__date { display: flex; align-items: center; gap: 8px; font-family: var(--cond); font-weight: 600; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.news-card__title { font-family: var(--cond); font-weight: 700; font-size: 25px; line-height: 1.1; text-transform: uppercase; }
.news-card__title a { color: var(--navy); }
.news-card__title a:hover { color: var(--teal); text-decoration: none; }
.news-card__text { font-size: 17px; line-height: 1.55; color: var(--muted); }
.news-card__more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: auto; padding-top: 6px; font-family: var(--cond); font-weight: 700; font-size: 18px; text-transform: uppercase; color: var(--navy); }
.news-card__more:hover { color: var(--teal); text-decoration: none; }

.news-item .h2 { margin: 16px 0 10px; }
.news-item__date { display: flex; align-items: center; gap: 8px; font-family: var(--cond); font-weight: 600; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin-bottom: 28px; }
.news-item__media { margin: 0 0 32px; }
.news-item__img { width: 100%; height: auto; }
.news-item__back { margin-top: 40px; }

@media (max-width: 1063px) {
  .news-card { flex-basis: calc((100% - 28px) / 2 - 1px); max-width: calc((100% - 28px) / 2); }
}
@media (max-width: 715px) {
  .news-card { flex-basis: 100%; max-width: 100%; }
}

/* ---------- Zone d'intervention (groupe zone) */

.zone { background: var(--navy); color: var(--white); padding-bottom: clamp(56px, 9vw, 96px); padding-top: clamp(56px, 9vw, 96px); }
.zone__grid { display: flex; flex-wrap: wrap; gap: 40px; }
.zone__intro, .zone__groups { flex: 1 1 380px; min-width: 0; }
.zone__intro { display: flex; flex-direction: column; gap: 16px; }
.zone__text { font-size: 19px; line-height: 1.6; color: var(--pale); max-width: 480px; }
.zone__groups { display: flex; flex-wrap: wrap; gap: 28px; }
.zone__group { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.zone__group strong { display: flex; align-items: center; gap: 8px; font-family: var(--cond); font-weight: 700; font-size: 22px; text-transform: uppercase; color: var(--yellow); }
.zone__group span { font-size: 17px; line-height: 1.7; color: var(--pale-2); }
.zone__map { flex: 0 0 100%; height: clamp(300px, 45vw, 440px); background: var(--navy-dark); border: 2px solid var(--navy-line); z-index: 0; }
.zone__map .leaflet-popup-content { font-family: var(--sans); font-size: 15px; color: var(--ink); }

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

/* ---------- Formulaires (groupe contact) : bandeau jaune d'appel à l'action, puis la partie
   formulaires (les champs sont dans base.css) */

.cta { background: var(--yellow); }
.cta__in { padding-top: clamp(44px, 6vw, 64px); padding-bottom: clamp(44px, 6vw, 64px); display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; }
.cta__text { display: flex; flex-direction: column; gap: 8px; max-width: 640px; color: var(--navy); font-size: 19px; line-height: 1.5; }
.cta__title { font-family: var(--cond); font-weight: 800; font-size: clamp(32px, 4vw, 46px); line-height: 1; text-transform: uppercase; color: var(--navy); }

/* Présentation (1 part) et formulaire (1,6 part) : la présentation a sa largeur calculée,
   le formulaire prend le reste (ses marges intérieures fausseraient un partage par flex-grow) */
.forms__grid { display: flex; gap: clamp(32px, 5vw, 64px); align-items: flex-start; }
.forms__aside { flex: none; width: calc((100% - clamp(32px, 5vw, 64px)) / 2.6); display: flex; flex-direction: column; gap: 20px; }
.forms__details li { display: flex; gap: 14px; align-items: flex-start; }
.forms__icon { width: 42px; height: 42px; padding: 9px; background: var(--white); border: 2px solid var(--line); color: var(--teal); }
.forms__details { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--line); padding-top: 20px; }
.forms__details span { display: block; font-family: var(--cond); font-weight: 700; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.forms__details a { color: var(--navy); font-weight: 700; font-size: 19px; overflow-wrap: anywhere; }
.forms__box { flex: 1 1 0; min-width: 0; background: var(--white); border: 2px solid var(--line); padding: clamp(20px, 3vw, 36px); }

.tabs { display: flex; gap: 0; margin: calc(-1 * clamp(20px, 3vw, 36px)) calc(-1 * clamp(20px, 3vw, 36px)) 28px; border-bottom: 2px solid var(--line); }
.tabs__btn { flex: 1; background: var(--sand); border: 0; padding: 16px 12px; font-family: var(--cond); font-weight: 700; font-size: 19px; text-transform: uppercase; color: var(--muted); cursor: pointer; border-bottom: 4px solid transparent; }
.tabs__btn.is-active { background: var(--white); color: var(--navy); border-bottom-color: var(--yellow); }
.js-tabs .form__title { display: none; }
.form + .form { margin-top: 48px; padding-top: 32px; border-top: 2px solid var(--line); }
.js-tabs .form + .form { margin-top: 0; padding-top: 0; border-top: 0; }
.form[hidden] { display: none; }

@media (max-width: 960px) {
  .forms__grid { flex-direction: column; align-items: stretch; }
  .forms__aside, .forms__box { flex: none; width: auto; }
}

/* ==================================================================== Pages */

/* ---------- Pages légales et page introuvable (app/templates/legal.php) */

.legal .h2 { margin: 16px 0 32px; }

/* ---------- Pages créées dans l'admin (groupe pages) : blocs (app/templates/page.php et blocks/) */

/* Colonne de lecture de 860 px, centrée : fil d'Ariane, titre et blocs à lire. Les blocs visuels
   (photos, avis, boutons, plan d'accès) prennent toute la largeur, de part et d'autre. */
.page .breadcrumb, .page__title { max-width: 860px; margin-left: auto; margin-right: auto; }
.page__title { margin-top: 16px; }
.blocks { margin-top: clamp(28px, 4vw, 44px); }
/* Espace entre deux blocs ; plus serré pour un bloc sans titre, qui continue le sujet du précédent */
.blocks__item + .blocks__item { margin-top: clamp(40px, 5vw, 64px); }
.blocks__item + .blocks__item--suite { margin-top: clamp(20px, 2.5vw, 32px); }
.block { margin: 0; }
.block__title { font-family: var(--cond); font-weight: 800; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.05; text-transform: uppercase; color: var(--navy); margin-bottom: 16px; }
.block .prose > :last-child { margin-bottom: 0; }
.block--text, .block--faq, .block--tarifs, .block--video { max-width: 860px; margin-left: auto; margin-right: auto; }
.block--media { display: flex; align-items: center; gap: clamp(28px, 5vw, 64px); }
.block--reverse { flex-direction: row-reverse; }
.block__media, .block__text { flex: 1 1 0; min-width: 0; }
.block__media .block__img, .block__photo .block__img { width: 100%; }
/* Une photo en hauteur est limitée en hauteur, pour ne pas étirer le bloc : elle tient entière dans
   son cadre (contain : ni recadrée, ni déformée). La place de chaque photo est réservée avant son
   chargement grâce à ses attributs width et height (View::img()) : la page ne saute pas. */
.block__media .block__img { max-height: 600px; object-fit: contain; }
/* Photo seule : à sa taille (attributs width et height), sans dépasser la largeur ; centrée */
.block--image { text-align: center; }
.block--image .block__zoom { display: block; }
.block--image .block__img { margin: 0 auto; max-height: 720px; object-fit: contain; }
.block__caption { margin-top: 10px; font-size: 16px; color: var(--muted); }
.block--photos { display: flex; gap: 20px; }
.block__photo { flex: 1 1 0; min-width: 0; margin: 0; }
.block__photo .block__zoom { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--line); }
.block__photo .block__img { height: 100%; object-fit: cover; transition: transform .3s; }
.block__photo .block__zoom:hover .block__img { transform: scale(1.04); }
.block__figure { margin: 0; }

/* Bouton d'action */
.block--action { background: var(--yellow); color: var(--navy); padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.block--action .block__text { flex: 1 1 360px; }
.block--action .prose { font-size: 19px; }

/* Questions / réponses (balise details : un clic ouvre la réponse) */
.block--faq { max-width: 860px; display: flex; flex-direction: column; gap: 10px; }
.faq { border: 2px solid var(--line); background: var(--white); }
.faq__question { padding: 16px 20px; font-family: var(--cond); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--navy); cursor: pointer; }
.faq[open] .faq__question { border-bottom: 1px solid var(--line); }
.faq__answer { padding: 16px 20px 2px; }

/* Avis clients */
.reviews { display: flex; flex-wrap: wrap; gap: 20px; }
.review { flex: 1 1 300px; margin: 0; padding: 24px; background: var(--sand); border-left: 4px solid var(--yellow); display: flex; flex-direction: column; gap: 10px; }
.review__stars { color: var(--yellow); font-size: 21px; letter-spacing: 2px; line-height: 1; }
.review__empty { color: var(--line); }
.review__text { margin: 0; font-style: italic; }
.review__author { font-weight: 700; color: var(--navy); }
.reviews__more { margin-top: 20px; }

/* Tarifs : prestation, points de conduite, prix */
.block--tarifs { max-width: 860px; }
.prices { list-style: none; margin: 16px 0 0; padding: 0; }
.prices__heading { font-family: var(--cond); font-weight: 700; font-size: 21px; text-transform: uppercase; color: var(--navy); margin: 22px 0 4px; }
.prices__heading:first-child { margin-top: 0; }
.prices__row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.prices__name { min-width: 0; }
.prices__dots { flex: 1; min-width: 20px; border-bottom: 2px dotted var(--line); }
.prices__price { font-weight: 700; color: var(--navy); white-space: nowrap; }

/* Coordonnées et plan d'accès */
.block--acces { display: flex; gap: clamp(28px, 5vw, 64px); align-items: stretch; }
.access { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.access li { display: flex; gap: 10px; align-items: flex-start; }
.access .icon { color: var(--teal); margin-top: .2em; }
.access a { color: var(--navy); font-weight: 700; overflow-wrap: anywhere; }
.block--acces .btns { margin-top: 18px; }
.block__map { flex: 1 1 0; min-width: 0; min-height: 340px; border: 2px solid var(--line); z-index: 0; }

@media (max-width: 720px) {
  .block--media, .block--reverse { flex-direction: column; align-items: stretch; }
  .block__media, .block__text { flex: none; }
  .block--photos { flex-wrap: wrap; gap: 12px; }
  .block__photo { flex: 0 0 calc(50% - 6px); }
  .block--photos-1 .block__photo, .block--photos-3 .block__photo:last-child { flex-basis: 100%; }
  .faq__question { padding: 14px 16px; font-size: 19px; }
  .faq__answer { padding: 14px 16px 2px; }
  .review { padding: 20px; }
  .block--acces { flex-direction: column; }
  .block__map { flex: none; height: 300px; min-height: 0; }
  .block--action { padding: 24px 20px; }
}

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

/* ---------- Pied de page (groupes entreprise et footer) */

.footer { background: var(--navy-dark); color: var(--pale); font-size: 16px; }
.footer a { color: var(--pale); }
.footer a:hover { color: var(--yellow); }
.footer__grid { padding-top: 56px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 36px; }
.footer__col { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 8px; line-height: 1.55; }
.footer__logo { font-family: var(--cond); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; color: var(--white); margin-bottom: 4px; }
.footer__logo span { color: var(--yellow); }
.footer__title { font-family: var(--cond); font-weight: 700; font-size: 19px; text-transform: uppercase; color: var(--white); }
.footer .footer__tel { color: var(--yellow); font-weight: 700; }
.footer__social { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.footer__social a { display: inline-flex; align-items: center; gap: 8px; }
.footer__line { display: flex; gap: 10px; align-items: flex-start; }
.footer__line .icon { margin-top: .2em; color: var(--yellow); }
.footer__bottom { padding-top: 18px; padding-bottom: 28px; border-top: 1px solid var(--navy-line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 14px; color: var(--grey); }
.footer__bottom a { color: var(--grey); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }

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

.callbar { display: none; }

@media (max-width: 720px) {
  body { padding-bottom: 64px; } /* place de la barre, fixée en bas de l'écran */

  .callbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; box-shadow: 0 -4px 16px rgba(14,42,71,.2); }
  .callbar__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px 8px; font-family: var(--cond); font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: .04em; }
  .callbar__btn:hover { text-decoration: none; }
  .callbar__btn--call { background: var(--navy); color: var(--white); }
  .callbar__btn--call:hover { color: var(--white); }
  .callbar__btn--quote { background: var(--yellow); color: var(--navy); }
  .callbar__btn--quote:hover { color: var(--navy); }
}