/* =========================================================================
   SlawTech, site vitrine v2 : feuille de style unique.
   Mobile d'abord : les règles de base visent un écran de 375 px,
   les blocs @media (min-width: …) ajoutent la mise en page des grands écrans.
   Couleurs tirées du logo (paon sarcelle, violet, touches orange).
   ========================================================================= */

/* ---------- Polices hébergées sur le site (licence OFL, voir polices/) ---------- */
@font-face {
  font-family: "Open Sans";
  src: url("../polices/open-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../polices/open-sans-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../polices/open-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../polices/open-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dancing Script";
  src: url("../polices/dancing-script-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables : couleurs, espacements ---------- */
:root {
  --nuit: #08141c;          /* fond sombre (en-tête, accueil, pied de page) */
  --nuit-2: #0d1f2a;        /* variante pour les cartes sur fond sombre */
  --fond: #ffffff;
  --fond-doux: #f3f7f6;     /* sections claires alternées */
  --texte: #17222b;         /* 15:1 sur --fond-doux */
  --texte-doux: #4a5a66;    /* 6,6:1 sur --fond-doux */
  --sarcelle: #0b6e69;      /* liens et boutons sur fond clair, 6:1 avec le blanc */
  --sarcelle-vif: #2fc4b2;  /* accents sur fond sombre, 8,5:1 sur --nuit */
  --orange: #f0a63a;        /* accents sur fond sombre, 9:1 sur --nuit */
  --violet: #3b2f80;        /* titres de cartes, 11:1 sur blanc */
  --clair-sur-nuit: #c9d6dc;/* texte secondaire sur fond sombre, 12,5:1 */
  --bordure: #d5e0df;
  --focus: var(--sarcelle); /* contour de focus, changé dans les zones sombres */
  --rayon: 0.75rem;
  --ombre: 0 0.25rem 1.25rem rgb(8 20 28 / 0.08);
  --espace: clamp(3rem, 8vw, 5.5rem); /* respiration verticale des sections */
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texte);
  background: var(--fond);
}

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

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

h2 {
  font-size: clamp(1.75rem, 4.5vw, 2.4rem);
  font-weight: 700;
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--sarcelle);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Focus visible partout, au clavier */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* Texte réservé aux lecteurs d'écran */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : visible seulement quand il reçoit le focus */
.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--orange);
  color: var(--nuit);
  font-weight: 700;
  border-radius: var(--rayon);
}

.lien-evitement:focus {
  top: 1rem;
}

/* Conteneur : 16 px de marge sur mobile, environ 83 % (10 colonnes sur 12) sur grand écran */
.conteneur {
  width: calc(100% - 2rem);
  margin-inline: auto;
}

@media (min-width: 64em) {
  .conteneur {
    width: 83.333%;
  }
}

/* Zones sombres : couleurs de texte et de focus adaptées */
.sombre {
  background: var(--nuit);
  color: #ffffff;
  --focus: var(--orange);
}

.sombre a {
  color: var(--sarcelle-vif);
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem; /* 44 px : cible tactile minimale */
  padding: 0.65rem 1.4rem;
  border: 2px solid var(--sarcelle);
  border-radius: 999px;
  background: var(--sarcelle);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  line-height: 1.3;
}

.bouton:hover {
  background: #095b57;
  border-color: #095b57;
}

.bouton--contour {
  background: transparent;
  color: var(--sarcelle);
}

.bouton--contour:hover {
  background: var(--sarcelle);
  color: #ffffff;
}

.sombre .bouton {
  background: var(--sarcelle-vif);
  border-color: var(--sarcelle-vif);
  color: var(--nuit);
}

.sombre .bouton:hover {
  background: #5fd6c7;
  border-color: #5fd6c7;
}

.sombre .bouton--contour {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

.sombre .bouton--contour:hover {
  background: #ffffff;
  color: var(--nuit);
}

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Petite mention sous un lien externe */
.precision {
  font-size: 0.9rem;
  color: var(--texte-doux);
}

.sombre .precision {
  color: var(--clair-sur-nuit);
}

/* ---------- En-tête et navigation ---------- */
.entete {
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.entete__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 0.75rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

.sombre .marque {
  color: #ffffff;
}

.marque img {
  width: 3rem;
  height: 3rem;
}

/* Barre de navigation : toute la largeur, éléments répartis, passage à la ligne */
.navigation {
  flex: 1 1 100%;
}

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.25rem;
}

.navigation a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
}

.sombre .navigation a {
  color: #ffffff;
}

.navigation a:hover {
  background: rgb(255 255 255 / 0.1);
  color: var(--sarcelle-vif);
}

@media (min-width: 64em) {
  .entete__ligne {
    flex-wrap: nowrap;
  }

  .navigation {
    flex: 1 1 auto;
  }
}

/* ---------- Bandeau d'accueil ---------- */
.accueil {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.accueil__image {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.accueil__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* Voile sombre : garantit le contraste du texte posé sur la photo */
.accueil__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(8 20 28 / 0.72) 0%, rgb(8 20 28 / 0.82) 55%, rgb(8 20 28 / 0.96) 100%);
}

.accueil__contenu {
  padding-block: clamp(4rem, 14vw, 9rem) clamp(3rem, 9vw, 6rem);
}

.accueil h1 {
  font-size: clamp(2rem, 7vw, 3.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  max-width: 20ch;
  margin-bottom: 1.25rem;
}

.accueil h1 span {
  color: var(--sarcelle-vif);
}

.accueil__intro {
  max-width: 44rem;
  font-size: 1.125rem;
  color: #e6eef1;
}

/* ---------- Sections ---------- */
.section {
  padding-block: var(--espace);
}

.section--douce {
  background: var(--fond-doux);
}

.section__tete {
  margin-bottom: 2rem;
}

.section__tete p {
  color: var(--texte-doux);
}

/* Disposition texte + image, côte à côte sur grand écran */
.duo {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 56em) {
  .duo {
    grid-template-columns: 3fr 2fr;
    gap: 3rem;
  }
}

/* Grilles de cartes (auto-fit : autant de colonnes que la largeur le permet) */
.grille {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grille--larges {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.carte {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.5rem;
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
}

.sombre .carte {
  background: var(--nuit-2);
  border-color: rgb(255 255 255 / 0.1);
  box-shadow: none;
}

.carte h3,
.carte h4 {
  color: var(--violet);
}

.sombre .carte h3 {
  color: #ffffff;
}

/* ---------- Citation du fondateur ---------- */
.citation {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--orange);
}

.citation p {
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.3;
  color: var(--violet);
  margin-bottom: 0.5rem;
}

.citation footer {
  color: var(--texte-doux);
  font-weight: 600;
}

/* ---------- Offres et tarifs ---------- */
.carte .offre__nom {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sarcelle);
  margin-bottom: 0.25rem;
}

.offre__prix {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--texte);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.offre__prix--texte {
  font-size: 1.35rem;
}

.offre--mise-en-avant {
  border: 2px solid var(--sarcelle);
}

.liste-coches {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.liste-coches li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.75rem;
  border-bottom: 1px solid var(--bordure);
}

/* Coche dessinée en CSS (aucune image, aucune police d'icônes) */
.liste-coches li::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.85rem;
  width: 0.45rem;
  height: 0.8rem;
  border: solid var(--sarcelle);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.carte .bouton {
  margin-top: auto;
}

.carte details {
  margin-bottom: 1.25rem;
}

/* ---------- Volets dépliables (details/summary, sans JavaScript) ---------- */
details {
  border: 1px solid var(--bordure);
  border-radius: 0.5rem;
  background: var(--fond);
}

details + details {
  margin-top: 0.75rem;
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* Chevron : pointe vers le bas, se retourne quand le volet est ouvert */
summary::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -0.25rem;
}

details[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 0.25rem;
}

.details__corps {
  padding: 0 1rem 1rem;
}

.details__corps ul {
  margin: 0;
  padding-left: 1.2rem;
}

/* ---------- CV ---------- */
.profil__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.langues {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1rem;
}

/* Frise chronologique (expériences, formations) */
.frise {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--bordure);
}

.frise li {
  position: relative;
  padding: 0 0 1.5rem 1.25rem;
}

.frise li:last-child {
  padding-bottom: 0;
}

.frise li::before {
  content: "";
  position: absolute;
  left: -0.45rem;
  top: 0.4rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--sarcelle);
  border: 2px solid var(--fond);
}

.frise h4 {
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}

.frise__quand {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--texte-doux);
  margin-bottom: 0.25rem;
}

.frise p {
  margin: 0;
}

/* ---------- Témoignages ---------- */
.temoignage blockquote {
  margin: 0 0 1.25rem;
  font-style: italic;
}

.temoignage blockquote p::before {
  content: "« ";
}

.temoignage blockquote p::after {
  content: " »";
}

.temoignage figcaption {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.95rem;
  color: var(--texte-doux);
}

.temoignage figcaption strong {
  display: block;
  color: var(--texte);
  font-size: 1.05rem;
}

.temoignage {
  margin: 0;
}

/* ---------- Méthodes (étapes numérotées) ---------- */
.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etape;
}

.etapes > li {
  counter-increment: etape;
}

.etapes h4 {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  color: var(--violet);
}

.etapes h4::before {
  content: counter(etape);
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--orange);
  color: var(--nuit);
  font-size: 1.1rem;
}

/* ---------- Ils nous ont fait confiance (logos d'origine, en gris comme sur l'ancien site) ---------- */
.references {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 40em) {
  .references {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.references li {
  display: grid;
  place-items: center;
  min-height: 6rem;
  padding: 1rem;
  border-bottom: 1px dashed var(--bordure);
}

.references img {
  width: auto;
  max-width: 100%;
  height: 3.25rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
}

.references li:hover img {
  filter: none;
  opacity: 1;
}

/* ---------- Contact : formulaire (0.2.0.0) ----------
   Mêmes champs et même ordre que l'ancien formulaire Contact Form 7, libellés visibles.
   Contrastes : bordure des champs #6b7c87 = 4,3:1 sur blanc (minimum 3:1 pour un contour),
   texte d'erreur #b3261e = 6,4:1 sur blanc. */
.formulaire {
  display: grid;
  gap: 1rem;
  margin-top: 0.5rem;
  text-align: left;
}

.formulaire__aide,
.formulaire__note {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texte-doux);
}

.champ {
  display: grid;
  gap: 0.35rem;
}

.champ label {
  font-weight: 600;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 2.75rem; /* 44 px */
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--texte);
  background: #ffffff;
  border: 1px solid #6b7c87;
  border-radius: 0.25rem;
  box-shadow: inset 0 1px 2px rgb(8 20 28 / 0.08);
}

.champ textarea {
  min-height: 10rem;
  resize: vertical;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--sarcelle);
}

.champ [aria-invalid="true"] {
  border: 2px solid #b3261e;
}

.champ__erreur {
  margin: 0;
  color: #b3261e;
  font-size: 0.95rem;
  font-weight: 600;
}

.champ__erreur:empty {
  display: none;
}

/* Message global (succès, erreur), annoncé aux lecteurs d'écran ; invisible tant qu'il est vide */
.formulaire__statut {
  padding: 0.75rem 1rem;
  border: 2px solid var(--sarcelle);
  border-radius: 0.5rem;
  background: #e6f3f1;
  color: var(--texte);
  font-weight: 600;
}

.formulaire__statut:empty {
  padding: 0;
  border: 0;
  background: none;
  margin-bottom: -1rem; /* annule l'espace de la grille tant qu'il n'y a rien à dire */
}

.formulaire__statut p {
  margin: 0;
}

.formulaire__statut ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  font-weight: 400;
}

.formulaire__statut--erreur {
  border-color: #b3261e;
  background: #fbeceb;
}

.formulaire .bouton {
  justify-self: center;
  min-width: 10rem;
  margin-top: 0.25rem;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.formulaire .bouton[disabled] {
  opacity: 0.75;
  cursor: progress;
}

/* Champ piège : hors de l'écran (pas display:none, que certains robots savent éviter) */
.champ-piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Page du formulaire renvoyée par le serveur quand JavaScript est absent */
.formulaire-seul {
  max-width: 40rem;
  margin-inline: auto;
}

/* ---------- Pied de page ---------- */
.pied {
  padding-block: 2.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.08);
}

.pied .navigation {
  margin-bottom: 1.5rem;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1.5rem;
  color: var(--clair-sur-nuit);
  font-size: 0.95rem;
}

/* Chaque ligne du bas fait au moins 44 px de haut : le lien reste une cible tactile correcte */
.pied__bas p {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}

/* ---------- Pages simples (mentions légales, 404) ---------- */
.page-simple h1 {
  font-size: clamp(2rem, 6vw, 2.75rem);
  margin-bottom: 1.5rem;
}

.page-simple h2 {
  font-size: 1.4rem;
  margin-top: 2rem;
}

.page-simple .grille {
  margin-top: 1rem;
}

.page-simple dl {
  margin: 0 0 1rem;
}

.page-simple dt {
  font-weight: 700;
  margin-top: 0.6rem;
}

.page-simple dd {
  margin: 0;
}

.erreur {
  min-height: 60vh;
  display: grid;
  align-content: center;
}

.erreur__code {
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: clamp(4rem, 18vw, 8rem);
  line-height: 1;
  color: var(--orange);
  margin-bottom: 0.5rem;
}

/* ---------- Petites classes utilitaires ---------- */
.marge-haut {
  margin-top: 1.5rem;
}

.duo--haut {
  align-items: start;
}

/* =========================================================================
   Mise en page des contenus de l'ancien site (0.1.1.0) :
   tuiles de l'accueil, photos en fond de section, CV en cartes, avis.
   ========================================================================= */

.texte-centre {
  text-align: center;
}

.texte-etroit {
  max-width: 60rem;
  margin-inline: auto;
}

.titre-moyen {
  font-size: clamp(1.5rem, 4vw, 2rem);
}

/* Titre entre deux filets, comme « Ils nous ont fait confiance » et « Contact » à l'origine */
.titre-filet {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 3.5vw, 1.6rem);
  letter-spacing: 0.03em;
  margin-bottom: 1.5rem;
}

.titre-filet::before,
.titre-filet::after {
  content: "";
  flex: 1 1 0;
  border-top: 1px solid var(--bordure);
}

.boutons--centre {
  justify-content: center;
}

.bouton--petit {
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  font-size: 0.95rem;
}

/* « Bientôt disponible » : bouton grisé, non cliquable */
.bouton--inactif,
.bouton--inactif:hover {
  margin-top: auto;
  background: transparent;
  border-color: #8a9aa3;
  color: var(--texte-doux);
  cursor: not-allowed;
}

/* Bouton blanc sur photo assombrie */
.bouton--clair {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

.bouton--clair:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--nuit);
}

.grille--deux {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  max-width: 52rem;
}

/* Citation centrée de l'accueil */
.texte-centre .citation {
  margin: 2.5rem auto;
  max-width: 44rem;
  text-align: left;
}

.citation footer {
  text-align: right;
  font-style: italic;
}

/* ---------- Tuiles de l'accueil ---------- */
.tuiles {
  display: grid;
  gap: 2px;
  background: #ffffff;
  grid-template-columns: minmax(0, 1fr);
}

.tuile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 13rem;
  color: #ffffff;
  text-decoration: none;
  background: var(--nuit);
  --focus: var(--orange);
}

.tuile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Voile sombre : garantit le contraste du texte sur la photo */
.tuile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(8 20 28 / 0.45) 0%, rgb(8 20 28 / 0.85) 100%);
}

.tuile__texte {
  display: block;
  padding: 1.25rem 1.5rem;
}

.tuile__titre {
  display: block;
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tuile__phrase {
  display: block;
  margin-block: 0.35rem;
  color: #e6eef1;
  font-size: 1rem;
}

.tuile:hover img,
.tuile:focus-visible img {
  transform: scale(1.04);
}

.tuile:focus-visible {
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  .tuile img {
    transition: none;
  }
}

@media (min-width: 48em) {
  /* Même disposition que l'ancien accueil : Services en grand à gauche,
     CV en haut à droite, Témoignages et Consultation dessous, Méthodes en bas à gauche */
  .tuiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 15rem 12rem 12rem;
    grid-template-areas:
      "services services cv cv"
      "services services avis consultation"
      "methodes methodes avis consultation";
  }

  .tuile--services { grid-area: services; align-items: center; }
  .tuile--cv { grid-area: cv; align-items: center; justify-content: flex-end; text-align: right; }
  .tuile--avis { grid-area: avis; align-items: center; text-align: center; }
  .tuile--consultation { grid-area: consultation; align-items: center; text-align: center; }
  .tuile--methodes { grid-area: methodes; justify-content: center; text-align: center; }

  .tuile--services .tuile__titre,
  .tuile--cv .tuile__titre {
    font-size: clamp(2rem, 4vw, 3rem);
  }

  .tuile--avis .tuile__titre,
  .tuile--consultation .tuile__titre,
  .tuile--methodes .tuile__titre {
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  }
}

/* ---------- Photos en fond de section (images d'origine, sous des cartes blanches) ---------- */
.fond-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2rem, 6vw, 3.5rem);
}

.fond-photo--section {
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
}

.fond-photo__image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fond-photo > .grille {
  margin-inline: auto;
}

/* Grand cadre blanc posé sur la photo (Avis, Consultation gratuite) */
.cadre {
  background: var(--fond);
  border: 4px solid var(--nuit);
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.cadre-texte {
  max-width: 64rem;
  margin-inline: auto;
  background: rgb(255 255 255 / 0.95);
}

.fond-photo--carte {
  border-radius: var(--rayon);
  padding: clamp(1rem, 4vw, 2rem);
}

/* ---------- CV en cartes ---------- */
.cv {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64em) {
  .cv {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }

  .cv__profil { grid-column: 1 / span 5; grid-row: 1; }
  .cv__langues { grid-column: 1 / span 5; grid-row: 2; }
  .cv__competences { grid-column: 6 / span 7; grid-row: 1 / span 3; }
  .cv__experiences { grid-column: 1 / span 7; grid-row: 4; }
  .cv__formations { grid-column: 8 / span 5; grid-row: 4; }
}

.carte .carte__titre {
  text-align: center;
  font-size: 1.4rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bordure);
  color: var(--texte);
}

.profil {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.profil__infos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profil__infos li {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}

.profil .profil__liens {
  flex-direction: column;
  margin-top: 0;
}

.cv__competences h4 {
  font-size: 1rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--texte-doux);
  text-align: center;
}

.cv__competences h4:first-of-type {
  margin-top: 0;
}

/* Compétences notées sur 5 étoiles, comme sur l'ancien CV */
.notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.6rem 1rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
}

.note {
  display: block;
  width: fit-content;
  margin-inline: auto;
  font-size: 1.15rem;
  line-height: 1.2;
}

.note::before {
  content: "★★★★★";
  background: linear-gradient(90deg, var(--sarcelle) var(--remplissage), #b9c7c6 var(--remplissage));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.note--50 { --remplissage: 100%; }
.note--45 { --remplissage: 90%; }
.note--40 { --remplissage: 80%; }
.note--30 { --remplissage: 60%; }
.note--25 { --remplissage: 50%; }
.note--20 { --remplissage: 40%; }

/* ---------- Témoignages (page Avis) ---------- */
.avis {
  display: grid;
  padding: 0;
}

.avis__appel {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 18rem;
  padding: 1.5rem;
  overflow: hidden;
}

.avis__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avis__encart {
  max-width: 18rem;
  padding: 1.25rem;
  background: rgb(23 26 28 / 0.85);
  color: #ffffff;
  text-align: center;
  font-size: 1.2rem;
  --focus: var(--orange);
}

.avis__liste {
  display: grid;
  gap: 2rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

@media (min-width: 56em) {
  .avis {
    grid-template-columns: 2fr 3fr;
  }
}

.temoignage blockquote {
  padding-left: 1rem;
  border-left: 3px solid var(--sarcelle);
}

.temoignage figcaption {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.temoignage figcaption img {
  flex: none;
  width: auto;
  height: 3rem;
}

/* ---------- Consultation gratuite ---------- */
.consultation {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.consultation__reservation {
  display: grid;
  place-items: center;
  min-height: 8rem;
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre);
  padding: 1.5rem;
}

@media (min-width: 56em) {
  .consultation {
    grid-template-columns: 1fr 1fr;
    min-height: 26rem;
  }

  .consultation__reservation {
    min-height: 20rem;
  }

  .duo--egal {
    grid-template-columns: 1fr 1fr;
  }
}