/* ============================================================
   FPRO - base.css - commun a tous les sites, toutes directions
   Ne porte que la structure : grilles, positions, responsive,
   accessibilite, formulaires. L'allure (polices, couleurs, rayons,
   filets) vient de direction-N.css, les couleurs d'accent de themes.css.
   Version 5
   ============================================================ */

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

:root {
  --gouttiere: 24px;
  --largeur: 1120px;
  --largeur-texte: 62ch;
  --r: 12px;
  --t-rapide: .15s ease;
  --titres: Georgia, serif;
  --corps: system-ui, sans-serif;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video { max-width: 100%; height: auto; display: block; }
img { background: var(--accent-clair); }

h1, h2, h3, h4 {
  font-family: var(--titres);
  line-height: 1.12;
  margin: 0 0 .5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child { margin-bottom: 0; }
a { color: var(--accent-fonce); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
strong { font-weight: 650; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent-clair); color: var(--encre); }

/* --- utilitaires ---------------------------------------------------------- */

.contenant { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.evite { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lien-evitement { position: absolute; left: var(--gouttiere); top: -100px; z-index: 100; background: var(--accent); color: var(--accent-contraste); padding: 10px 16px; border-radius: 8px; transition: top var(--t-rapide); }
.lien-evitement:focus { top: 10px; }
.etiq { display: block; margin: 0 0 14px; }
.mention { font-size: .85rem; color: var(--encre-2); }
.mesure { max-width: var(--largeur-texte); }
.contenant.mesure { max-width: calc(var(--largeur-texte) + 2 * var(--gouttiere)); }
/* pages annexes (mentions, confidentialite) : un titre de page, pas un titre d'accueil */
.section .mesure h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem); margin-bottom: 1em; }
.section .mesure h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); margin-top: 1.6em; }
[id] { scroll-margin-top: 84px; }

/* --- boutons -------------------------------------------------------------- */

.bouton {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px; min-height: 48px;
  border: 1px solid transparent; border-radius: var(--r);
  font-family: var(--corps); font-size: .95rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background var(--t-rapide), border-color var(--t-rapide), color var(--t-rapide), transform var(--t-rapide);
}
.bouton:active { transform: translateY(1px); }
.bouton svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bouton--plein { background: var(--accent); color: var(--accent-contraste); }
.bouton--plein:hover { background: var(--accent-fonce); color: var(--accent-contraste); }
.bouton--contour { border-color: var(--trait-fort); color: var(--encre); background: transparent; }
.bouton--contour:hover { border-color: var(--accent); color: var(--accent-fonce); background: var(--accent-clair); }
.bouton--discret { background: var(--accent-clair); color: var(--accent-fonce); }
.bouton--discret:hover { background: var(--accent); color: var(--accent-contraste); }
.boutons, .accueil__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- en-tete -------------------------------------------------------------- */

.entete { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--trait); }
.entete__in { display: flex; align-items: center; gap: 20px; min-height: 68px; }
/* La marque : le nom, sa ligne, et depuis la version 9 un logo facultatif.
   Le logo se pose a gauche, sur les deux rangees, et le nom reste ecrit : un
   logo accompagne un nom, il le remplace rarement, et la regle tient pour
   n'importe quelle forme de logo, carre, rond ou longue marque horizontale.
   Sans logo, la grille n'a qu'une colonne et rien ne change a l'ecran. */
.marque { color: var(--encre); text-decoration: none; margin-right: auto; line-height: 1.1;
  display: grid; grid-template-columns: auto; align-items: center; column-gap: 10px; }
.marque__nom { display: block; }
.marque__ligne { display: block; font-family: var(--corps); font-weight: 400; color: var(--encre-2); }
.marque--logo { grid-template-columns: auto auto; }
.marque__logo { grid-row: 1 / span 2; grid-column: 1; display: block; height: 36px; }
.marque__logo img, .marque__logo svg { display: block; height: 100%; width: auto; max-width: 140px; object-fit: contain; }
.marque--logo .marque__nom, .marque--logo .marque__ligne { grid-column: 2; }
.nav { display: none; }
.nav a { color: var(--encre-2); text-decoration: none; padding: 8px 12px; }
.nav a:hover { color: var(--encre); }
.entete .bouton { display: none; }
@media (min-width: 960px) {
  .nav { display: flex; gap: 2px; }
  .entete .bouton { display: inline-flex; }
}

/* --- accueil -------------------------------------------------------------- */

.accueil { padding-block: clamp(40px, 6vw, 88px) clamp(36px, 5vw, 64px); }
.accueil__in { display: grid; gap: 40px; align-items: center; }
.accueil h1 { margin-bottom: .3em; }
.accueil__sous { color: var(--encre-2); margin-bottom: 1em; }
.accueil__corps { max-width: 46ch; color: var(--encre-2); }
.accueil__corps p:last-child { margin-bottom: 0; }
.accueil__actions { margin-top: 28px; }
.accueil__media { position: relative; }
.portrait { margin: 0; overflow: hidden; background: var(--accent-clair); aspect-ratio: 4 / 5; width: 100%; max-width: 440px; margin-inline: auto; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.accueil__note { display: none; }
@media (min-width: 900px) {
  .accueil__in { grid-template-columns: 1.1fr .9fr; gap: 64px; }
  .portrait { margin-inline: 0 0; margin-left: auto; }
}

/* --- compositions d'accueil ------------------------------------------------
   La direction fait le caractere, la palette fait la couleur, la composition
   fait le plan. Trois plans possibles pour le meme contenu, tires au sort
   comme le reste : deux confreres de la meme ville ne tombent pas dessus en
   meme temps. Sur telephone, tout revient a une colonne de toute facon.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  /* image a gauche, texte a droite */
  html[data-compo="gauche"] .accueil__in { grid-template-columns: .9fr 1.1fr; }
  html[data-compo="gauche"] .accueil__texte { order: 2; }
  html[data-compo="gauche"] .accueil__media { order: 1; }
  html[data-compo="gauche"] .portrait { margin-left: 0; margin-right: auto; }
  html[data-compo="gauche"] .portrait img { object-position: center 22%; }
}

/* accueil sans image : le titre porte la page. Le plan du client qui n'a pas
   encore envoye de photo, et de celui qui n'en veut pas.

   Un titre seul dans le coin haut gauche d'une page blanche ne se lit pas
   comme un parti pris, il se lit comme une image qui n'a pas charge. Le
   remede n'est pas de remplir le vide avec un dessin, c'est de le fermer :
   le haut de page devient un bandeau teinte qui va d'un bord a l'autre, et
   la bande de reperes qui le suit entre dans le meme bandeau. Le nom, la
   phrase, les trois chiffres utiles : c'est une page de titre, et il n'y
   manque rien. */
html[data-compo="aucun"] .accueil {
  background: var(--fond-2);
  padding-block: clamp(64px, 10vw, 150px) clamp(44px, 6vw, 84px);
}
html[data-compo="aucun"] .accueil__in { grid-template-columns: minmax(0, 1fr) !important; }
html[data-compo="aucun"] .accueil h1 { font-size: clamp(2.6rem, 1.9rem + 4.2vw, 5.2rem); max-width: 18ch; }
html[data-compo="aucun"] .accueil__sous { max-width: 52ch; font-size: 1.15rem; }
html[data-compo="aucun"] .accueil__corps { max-width: 60ch; columns: 1; }
html[data-compo="aucun"] .accueil + .chiffres {
  background: var(--fond-2);
  border-top: 1px solid var(--trait);
  padding-block: clamp(22px, 2.6vw, 34px);
}
@media (min-width: 900px) {
  /* Le nom a gauche, ce qu'on fait a droite : les deux moities du bandeau
     portent chacune quelque chose, et la place de l'image ne se devine plus.
     Les lignes sont posees a la main parce que le surtitre et la phrase
     d'accroche sont facultatifs : une rangee vide se referme toute seule,
     alors qu'un placement automatique decalerait la colonne de droite. */
  html[data-compo="aucun"] .accueil__texte {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    grid-template-rows: auto auto auto;
    column-gap: clamp(48px, 5vw, 88px);
    align-items: end;
  }
  html[data-compo="aucun"] .accueil__sur    { grid-area: 1 / 1 / 2 / 2; }
  html[data-compo="aucun"] .accueil h1      { grid-area: 2 / 1 / 3 / 2; max-width: none; }
  html[data-compo="aucun"] .accueil__sous   { grid-area: 3 / 1 / 4 / 2; margin-bottom: 0; }
  html[data-compo="aucun"] .accueil__corps  { grid-area: 1 / 2 / 4 / 3; columns: 1; max-width: 46ch; }
  html[data-compo="aucun"] .accueil__actions { grid-area: 4 / 1 / 5 / 3; margin-top: 38px; }
  html[data-compo="aucun"] .accueil__corps p:first-child { margin-top: 0; }
  html[data-compo="aucun"] .accueil__corps p:last-child { margin-bottom: 0; }
}

/* accueil pleine largeur : le texte au centre, l'image en bandeau dessous.
   Le plan qui convient a une photo de salle, de vitrine ou de chantier,
   c'est-a-dire tout ce qui est plus large que haut. */
html[data-compo="bandeau"] .accueil__in { grid-template-columns: minmax(0, 1fr) !important; gap: 36px; }
html[data-compo="bandeau"] .accueil__texte { max-width: 40rem; margin-inline: auto; text-align: center; }
html[data-compo="bandeau"] .accueil__corps { max-width: 54ch; margin-inline: auto; }
html[data-compo="bandeau"] .accueil__actions { justify-content: center; }
html[data-compo="bandeau"] .portrait { max-width: none; aspect-ratio: 21 / 9; margin-inline: 0; margin-left: 0; }
html[data-compo="bandeau"] .portrait img { object-position: center 45%; }
/* sur un telephone, une bande 21/9 ne fait plus que cent cinquante pixels de
   haut : on ne voit plus rien de la boutique. Le bandeau s'y ouvre en 3/2. */
@media (max-width: 699px) {
  html[data-compo="bandeau"] .portrait { aspect-ratio: 3 / 2; }
}

/* --- galerie ---------------------------------------------------------------
   Une grille de photos legendees. Generique parce que plusieurs metiers en
   ont besoin : les menus et les plats d'un restaurant, les chantiers d'un
   artisan, le portfolio d'un photographe. Chaque pack peut la preciser.
   -------------------------------------------------------------------------- */

.galerie__grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.galerie__item figure { margin: 0; }
.galerie__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-carte, 14px);
  border: 1px solid var(--trait);
  background: var(--accent-clair);
}
.galerie__item figcaption {
  margin-top: 10px;
  font-size: .92rem;
  color: var(--encre-2);
  line-height: 1.45;
}
.galerie__note { margin-top: 24px; }

/* --- chiffres cles -------------------------------------------------------- */

.chiffres__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.chiffre { padding: 22px 20px 20px 0; border-left: 1px solid var(--trait); }
.chiffre:nth-child(2n + 1) { border-left: 0; }
.chiffre:nth-child(2n) { padding-left: 20px; }
.chiffre:nth-child(n + 3) { border-top: 1px solid var(--trait); }
.chiffre b { display: block; font-family: var(--titres); line-height: 1.1; margin-bottom: 6px; white-space: nowrap; }
.chiffre b a { text-decoration: none; color: inherit; }
.chiffre span { display: block; font-size: .82rem; color: var(--encre-2); }
@media (max-width: 359.98px) {
  .chiffres__in { grid-template-columns: minmax(0, 1fr); }
  .chiffre:nth-child(n) { border-left: 0; padding-left: 0; border-top: 1px solid var(--trait); }
  .chiffre:first-child { border-top: 0; }
}
@media (min-width: 900px) {
  .chiffres__in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chiffre:nth-child(n) { border-top: 0; border-left: 1px solid var(--trait); padding-left: 24px; }
  .chiffre:nth-child(1) { border-left: 0; padding-left: 0; }
}

/* --- sections ------------------------------------------------------------- */

.section { padding-block: clamp(56px, 8vw, 104px); }
.section__tete h2 { margin-bottom: .6em; }
.section__corps { max-width: var(--largeur-texte); }
.section__corps > :last-child { margin-bottom: 0; }

.texte-media__in, .texte-lieu__in, .contact__in { display: grid; gap: 40px; }
.figure { margin: 0; overflow: hidden; }
.figure figcaption { font-size: .9rem; color: var(--encre-2); margin-top: 10px; }
.citation { margin: 28px 0 0; }
/* citation d'une section en texte seul : elle suit la colonne du corps */
.texte__citation { max-width: var(--largeur-texte); }
.lieu { align-self: start; }
.lieu h3 { margin-bottom: .4em; }
.lieu .mention { margin: 20px 0 0; }
@media (min-width: 900px) {
  .texte-media__in { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .texte-lieu__in { grid-template-columns: 1.2fr .8fr; gap: 64px; }
  .contact__in { grid-template-columns: .9fr 1.1fr; gap: 64px; }
}

/* --- contenus produits par les blocs de texte ----------------------------- */

table { border-collapse: collapse; width: 100%; }
.t td, .h td { padding: 12px 0; border-top: 1px solid var(--trait); vertical-align: baseline; }
.t tr:last-child td, .h tr:last-child td { border-bottom: 1px solid var(--trait); }
.t td:last-child { text-align: right; white-space: nowrap; font-family: var(--titres); }
.h td:first-child { color: var(--encre-2); width: 38%; }
.h tr[data-aujourdhui] td { font-weight: 650; color: var(--encre); }

ul.motifs, ul.infos-tarifs, ul.coordonnees { list-style: none; margin: 0 0 1em; padding: 0; }
ul.motifs li { padding: 12px 0; border-bottom: 1px solid var(--trait); }
ul.motifs { border-top: 1px solid var(--trait); }
ul.infos-tarifs li, ul.coordonnees li { padding: 5px 0 5px 18px; position: relative; color: var(--encre-2); font-size: .95rem; }
ul.infos-tarifs li::before, ul.coordonnees li::before { content: ''; position: absolute; left: 0; top: .85em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.reserve { font-size: .9rem; color: var(--encre-2); margin-top: 20px; }
.adresse-forte { font-family: var(--titres); margin: 24px 0 8px; }
.tel-fort { font-family: var(--titres); margin: 0 0 .2em; line-height: 1.1; }
.tel-fort a { text-decoration: none; color: var(--encre); }
.urgence { font-size: .9rem; color: var(--encre-2); }
dl.pratique { margin: 0 0 1em; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
dl.pratique dt { color: var(--encre-2); }
dl.pratique dd { margin: 0; }

.services { display: grid; gap: 14px; }
.service { padding: 24px; border: 1px solid var(--trait); }
.service__cle { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-fonce); margin-bottom: 8px; }
.service h3 { margin-bottom: .35em; }
.service p { margin: 0; color: var(--encre-2); font-size: .95rem; }
.cartes .section__corps { max-width: none; }
@media (min-width: 720px) { .services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(3, 1fr); } }

.tarifs-fort { display: grid; gap: 12px; }
.tarif-carte { padding: 20px; border: 1px solid var(--trait); display: flex; flex-direction: column; gap: 10px; }
.tarif-carte__prix { font-family: var(--titres); font-size: 1.6rem; }
@media (min-width: 720px) { .tarifs-fort { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

/* --- formulaire ----------------------------------------------------------- */

.form .champ { margin-bottom: 16px; }
.form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.form input[type="text"], .form input[type="email"], .form textarea {
  width: 100%; border: 1px solid var(--trait-fort); background: var(--surface);
  padding: 12px 14px; font: inherit; color: var(--encre); border-radius: var(--r);
}
.form input:focus, .form textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-clair); }
.form textarea { min-height: 130px; resize: vertical; }
.consentement { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--encre-2); margin: 8px 0 18px; }
.consentement input { margin-top: 4px; flex: none; }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form button { font: inherit; }
.form__retour { margin-top: 12px; font-size: .95rem; }
.form__retour:empty { display: none; }
.form__retour.ok { color: var(--accent-fonce); }
.form__retour.ko { color: var(--alerte); }

/* --- pied ----------------------------------------------------------------- */

.pied { border-top: 1px solid var(--trait); padding-block: 48px 110px; font-size: .92rem; color: var(--encre-2); }
.pied__grille { display: grid; gap: 32px; }
.pied h2 { font-family: var(--corps); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre); margin-bottom: 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { padding: 2px 0; }
.pied .h td { padding: 4px 0; border: 0; font-size: .9rem; }
.pied__legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--trait); max-width: 72ch; font-size: .85rem; }
@media (min-width: 800px) {
  .pied__grille { grid-template-columns: 1fr 1.2fr 1fr; }
  .pied { padding-bottom: 48px; }
}

/* --- barre d'actions mobile ------------------------------------------------ */

.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--surface); border-top: 1px solid var(--trait);
}
.barre-mobile a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 12px; font-size: .78rem; font-weight: 600; text-decoration: none; color: var(--encre); }
.barre-mobile a:first-child { background: var(--accent); color: var(--accent-contraste); }
.barre-mobile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 800px) { .barre-mobile { display: none; } }

/* --- impression ----------------------------------------------------------- */

@media print {
  .entete, .barre-mobile, .form, .lien-evitement { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; }
}