/* DeveloppIA : la DA « humaine » d'Instagram (02/10/2026), appliquée au site.
   Blanc et bleu, titres francs en marine, mots clés dans un encadré bleu,
   pastilles bleues, vagues, icônes 3D, photos de dentistes et de patients.
   Chargée APRÈS styles.css : elle ne fait que repeindre, les textes ne changent pas. */

:root {
  --bleu: #4F7CFF;
  --bleu-fonce: #3661E0;
  --bleu-texte: #3661E0;
  --marine: #14235E;
  --doux: #4A5470;
  --ciel: #EEF3FF;
  --ciel-2: #DCE6FF;
  --encre: #14235E;
  --gris: #4A5470;
  --gris-clair: #EEF3FF;
  --noir: #14235E;
  --noir-2: #14235E;
  --violet: #3661E0;
  --cyan: #93B0FF;
  --degrade: linear-gradient(100deg, #5F89FF 0%, #3661E0 100%);
  --ligne: rgba(20, 35, 94, .12);
  --rayon: 26px;
  --ombre: 0 30px 60px -34px rgba(20, 35, 94, .45);
  --vagues-bleu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='none'%3E%3Cpath d='M0 110C380 10 820 220 1440 60V0H0Z' fill='%236E95FF' fill-opacity='.5'/%3E%3Cpath d='M0 650C420 540 900 770 1440 610V800H0Z' fill='%233D69EE' fill-opacity='.5'/%3E%3Cpath d='M0 728C480 650 960 830 1440 706V800H0Z' fill='%232F5BE0' fill-opacity='.55'/%3E%3C/svg%3E");
  --vague-basse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 46C420 -4 900 128 1440 34V140H0Z' fill='%23EEF3FF'/%3E%3Cpath d='M0 98C480 54 960 150 1440 86V140H0Z' fill='%23DCE6FF'/%3E%3C/svg%3E");
  --vagues-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='none'%3E%3Cpath d='M0 640C420 540 900 770 1440 610V800H0Z' fill='%23DCE6FF'/%3E%3Cpath d='M0 724C480 650 960 830 1440 704V800H0Z' fill='%23CFDCFF'/%3E%3C/svg%3E");
}

body { color: var(--marine); }
h1, h2, h3 { font-weight: 800; letter-spacing: -.035em; }
b { font-weight: 700; }
::selection { background: var(--bleu); color: #fff; }

/* ---------- Titres, encadrés, pastilles ---------- */
.titre { font-weight: 800; color: var(--marine); line-height: 1.08; letter-spacing: -.04em; }
.titre--clair { color: #fff; }
.texte { color: var(--doux); }
.texte--clair { color: rgba(255, 255, 255, .9); }

/* L'encadré : le geste des carrousels. Un aplat bleu derrière les mots qui comptent. */
.encadre, .hero-titre .degrade {
  background: var(--bleu); color: #fff; -webkit-text-fill-color: #fff;
  -webkit-background-clip: border-box; background-clip: border-box;
  padding: 0 .14em .04em; border-radius: .09em; animation: none !important;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.offre .encadre, .parcours .encadre, .contact .encadre, .appel .encadre {
  background: #fff; color: var(--marine); -webkit-text-fill-color: var(--marine);
}

.sur, .hero-sur {
  display: block; width: fit-content; max-width: 100%;
  background: var(--bleu); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.25;
  padding: .62rem 1.05rem .58rem; border-radius: 999px; margin-bottom: 1.3rem;
}
.sur--clair { background: #fff; color: var(--bleu-fonce); }
.sur--puces { margin-top: 2.2rem; margin-bottom: .9rem; background: var(--marine); }
.constat .int > .sur, .methode > .int:first-child > .sur, .offre .sur, .realisations > .int:first-child > .sur,
.equipe > .int:first-child > .sur, .parcours .sur { margin-inline: auto; }

.souligne {
  background: var(--bleu); color: #fff; font-weight: 700; padding: .04em .28em .08em; border-radius: .2em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Boutons ---------- */
.bouton { font-weight: 700; }
.bouton--plein, .hero .bouton--plein {
  background: var(--bleu); color: #fff;
  box-shadow: 0 16px 32px -14px rgba(54, 97, 224, .75);
}
.bouton--plein:hover, .hero .bouton--plein:hover { background: var(--bleu-fonce); box-shadow: 0 20px 38px -14px rgba(54, 97, 224, .8); }
.parcours .bouton--plein, .contact .bouton--plein, .appel .bouton--plein {
  background: #fff; color: var(--bleu-fonce); box-shadow: 0 18px 36px -16px rgba(20, 35, 94, .55);
}
.parcours .bouton--plein:hover, .contact .bouton--plein:hover, .appel .bouton--plein:hover {
  background: #fff; color: var(--marine); box-shadow: 0 22px 44px -16px rgba(20, 35, 94, .65);
}
.bouton--lien { color: var(--bleu-fonce); background: #fff; border: 2px solid var(--ciel-2); padding: .85rem 1.35rem; }
.bouton--lien:hover { color: var(--marine); border-color: var(--bleu); }
.bouton--contour { border: 2px solid rgba(255, 255, 255, .6); color: #fff; }
.bouton--contour:hover { background: rgba(255, 255, 255, .14); }
.bouton--nav, .nav:not(.nav--solide):not(.menu-ouvert) .bouton--nav { background: var(--bleu); color: #fff; }
.bouton--nav:hover { background: var(--bleu-fonce); }

/* ---------- Le logo : le D qui sourit ---------- */
.marque { font-weight: 800; letter-spacing: -.03em; }
.marque-logo { background: url("/da/logo.svg") center / contain no-repeat; border-radius: 50%; }
.marque-logo > * { display: none; }

/* ---------- Barre du haut ---------- */
.nav { color: var(--marine); }
.nav--solide { background: rgba(255, 255, 255, .9); }
.nav-panneau { border-radius: 20px; box-shadow: 0 30px 60px -24px rgba(20, 35, 94, .4); }
.nav-panneau .nav-p:hover, .nav-panneau .nav-p:focus-visible { background: var(--ciel); }
.nav-p-nom { font-weight: 700; }
.langue-active { background: var(--bleu); color: #fff; }
.langues { border-color: var(--ciel-2); }

/* ---------- Vagues : sections bleues et sections claires ---------- */
.manifeste, .offre, .parcours, .contact, .appel, .hero, .page-hero { position: relative; overflow: hidden; }
.manifeste::before, .offre::before, .parcours::before, .contact::before, .appel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: var(--vagues-bleu) center / 100% 100% no-repeat; filter: none; transform: none;
  width: auto; height: auto; left: 0; top: 0; border-radius: 0;
}
.parcours::after { display: none; }
.manifeste > *, .offre > *, .parcours > *, .contact > *, .appel > *, .page-hero > * { position: relative; z-index: 1; }

/* ---------- Ouverture ---------- */
.hero {
  min-height: 0; display: block; background: #fff; color: var(--marine);
  padding: calc(64px + clamp(2rem, 5vw, 3.6rem)) 0 clamp(4rem, 8vw, 6.5rem);
}
.hero-vagues { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(70px, 9vw, 130px); pointer-events: none; background: var(--vague-basse) center bottom / 100% 100% no-repeat; }
.hero-int { position: relative; text-align: left; display: grid; gap: 2.6rem; align-items: center; }
.hero-sur { margin-bottom: 1.4rem; }
.hero-titre {
  font-size: clamp(2.45rem, 5vw, 4.35rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.06;
  color: var(--marine); margin: 0; max-width: 15ch;
}
.hero-titre br { display: none; }
.hero-texte { color: var(--doux); margin: 1.5rem 0 0; max-width: 34rem; font-size: clamp(1.06rem, 1.35vw, 1.22rem); }
.hero-actions { justify-content: flex-start; margin-top: 2rem; }

.hero-visuel { position: relative; padding-bottom: 5.5rem; }
.hero-photo {
  margin: 0 0 0 auto; width: 86%; max-width: 460px; aspect-ratio: 4 / 5; border-radius: 30px; overflow: hidden;
  box-shadow: 0 44px 80px -40px rgba(20, 35, 94, .55); background: var(--ciel);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hero-sourire {
  position: absolute; left: 0; top: 7%; width: min(42%, 200px); aspect-ratio: 3 / 2; margin: 0;
  border-radius: 20px; overflow: hidden; border: 5px solid #fff; transform: rotate(-4deg);
  box-shadow: 0 24px 40px -22px rgba(20, 35, 94, .55);
}
.hero-sourire img { width: 100%; height: 100%; object-fit: cover; }
.hero-ico { position: absolute; z-index: 3; filter: drop-shadow(0 18px 18px rgba(20, 35, 94, .28)); pointer-events: none; }
.hero-ico--dent { width: clamp(78px, 9vw, 118px); height: auto; right: -2%; top: -5%; }
.hero-ico--etoile { width: clamp(60px, 6.5vw, 86px); height: auto; right: -3%; bottom: 30%; }
html.anime .hero-ico--dent { animation: flotte 6s ease-in-out infinite alternate; }
html.anime .hero-ico--etoile { animation: flotte 5s ease-in-out .8s infinite alternate-reverse; }
@keyframes flotte { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-12px) rotate(4deg); } }

.hero-appareil {
  position: absolute; left: 0; bottom: 0; z-index: 2; margin: 0; width: min(410px, 92%);
  padding: 0; border-radius: 22px; background: #fff; border: 1px solid var(--ligne);
  box-shadow: 0 34px 64px -26px rgba(20, 35, 94, .45);
}
.hero-appareil > * { background: #fff; }
.appareil-barre { border-bottom: 1px solid var(--ligne); padding: 10px 14px; border-radius: 22px 22px 0 0; }
.appareil-barre span { background: var(--ciel-2); width: 9px; height: 9px; }
.appareil-corps { padding: .95rem 1rem 1.05rem; gap: .7rem; border-radius: 0 0 22px 22px; }
.bulle { font-size: .9rem; line-height: 1.45; padding: .7rem .85rem; }
.bulle-qui { font-size: .64rem; color: var(--doux); font-weight: 700; }
.bulle--patient { background: var(--ciel); color: var(--marine); margin-left: 12%; font-weight: 600; }
.bulle--ia { background: var(--bleu); color: #fff; border: 0; margin-right: 4%; }
.bulle--ia .bulle-qui { color: rgba(255, 255, 255, .85); }
.pastille-ia { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
.bulle-source { color: #fff; font-weight: 700; font-size: .78rem; }
.bulle--ia .source-puce { background: url("/da/logo.svg") center / contain no-repeat; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.bulle--ia .curseur { background: #fff; }
.source-puce { background: var(--bleu); }

@media (min-width: 960px) {
  .hero-int { grid-template-columns: 1.14fr .86fr; gap: 3rem; }
  .hero-actions { gap: .8rem; }
  .hero-visuel { padding-bottom: 4.5rem; }
  .hero-appareil { left: -9%; }
}
@media (max-width: 959px) {
  .hero-titre { max-width: 18ch; }
}

/* ---------- Bandeau ---------- */
.bandeau { background: var(--bleu); color: #fff; border: 0; padding: 1.05rem 0; }
.bandeau-piste { font-weight: 700; }
.bandeau-piste span::before { background: #fff; opacity: .7; }

/* ---------- Le constat ---------- */
.constat { background: #fff; }
.chiffres { gap: 1rem; }
.chiffres-photo { border-radius: var(--rayon); overflow: hidden; background: var(--ciel); aspect-ratio: 4 / 3; box-shadow: var(--ombre); }
.chiffres-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.chiffre { position: relative; background: var(--ciel); border: 0; padding: 1.7rem 1.6rem 1.6rem; display: flex; flex-direction: column; }
.chiffre:hover { background: #E4ECFF; border-color: transparent; }
.chiffre-ico { position: absolute; top: 1rem; right: 1rem; width: 62px; height: 62px; filter: drop-shadow(0 10px 12px rgba(20, 35, 94, .2)); }
.chiffre-nb {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--bleu); -webkit-text-fill-color: var(--bleu); font-weight: 800; padding-right: 64px;
  font-size: clamp(2.3rem, 3.6vw, 3.2rem);
}
.chiffre-nb--date { color: var(--marine); -webkit-text-fill-color: var(--marine); font-size: clamp(1.55rem, 2.3vw, 2rem); }
.chiffre-texte { color: var(--marine); font-weight: 500; }
.chiffre-source { margin-top: auto; padding-top: .9rem; color: var(--doux); font-weight: 600; }
.constat .titre { text-align: left; margin-inline: 0; max-width: 24ch; }
.chiffres-photo { aspect-ratio: 16 / 9; margin: .4rem 0 0; }
.chiffres { margin-top: 1.2rem; }
@media (min-width: 700px) { .chiffres { grid-template-columns: 1fr 1fr; } }

/* ---------- Notre conviction ---------- */
.voie { background: var(--ciel); }
.puces li { color: var(--doux); }
.puces li b { color: var(--marine); }
.puces li::before { background: var(--bleu); border-radius: 3px; transform: rotate(45deg); }
.puces li a { border-bottom-color: var(--bleu); }
.voie-image { border-radius: 30px; box-shadow: 0 44px 80px -44px rgba(20, 35, 94, .6); }
.voie-etiquette {
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 18px;
  grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; padding: .85rem 1rem;
  box-shadow: 0 18px 36px -20px rgba(20, 35, 94, .55);
}
.etiquette-ico { grid-row: span 2; width: 46px; height: 46px; }
.etiquette-titre { font-weight: 800; color: var(--marine); }
.etiquette-sous { color: var(--doux); }

/* ---------- Manifeste ---------- */
.manifeste { background: var(--bleu); color: #fff; }
.manifeste-texte { font-weight: 800; letter-spacing: -.035em; font-size: clamp(1.8rem, 4vw, 3.25rem); line-height: 1.16; }
.visages { display: flex; justify-content: center; margin-top: 2.2rem; }
.visages img {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 50% 18%;
  border: 4px solid #fff; box-shadow: 0 14px 30px -12px rgba(20, 35, 94, .5); background: var(--ciel);
}
.visages img + img { margin-left: -18px; }

/* ---------- La méthode ---------- */
.methode { background: #fff; }
.etape { border-top-color: var(--ligne); }
.methode .etape:hover { background: transparent; border-color: var(--ligne); }
.etape-tete { display: flex; align-items: center; gap: .85rem; }
.etape-nb {
  background: var(--bleu); color: #fff; -webkit-text-fill-color: #fff; -webkit-background-clip: border-box; background-clip: border-box;
  font-weight: 800; font-size: .8rem; letter-spacing: .06em; padding: .45rem .8rem; border-radius: 999px; line-height: 1;
}
.etape-ico { width: 54px; height: 54px; filter: drop-shadow(0 10px 12px rgba(20, 35, 94, .2)); }
.etape h3 { color: var(--marine); }
.etape p { color: var(--doux); }
.methode-cadre {
  background: var(--ciel) var(--vagues-clair) center bottom / 100% 100% no-repeat; border: 0; border-radius: 30px;
  box-shadow: 0 44px 90px -54px rgba(20, 35, 94, .55);
}
.methode-exemple { background: var(--marine); }
.diag-tete, .suivi-tete, .ia-tete { color: var(--doux); }
.jauge { border-radius: 20px; box-shadow: 0 16px 30px -22px rgba(20, 35, 94, .4); }
.jauge-fond { stroke: #E4ECFF; }
.jauge-trait--google { stroke: var(--bleu); }
.jauge-trait--ia { stroke: var(--marine); }
.jauge-nb { font-weight: 800; color: var(--marine); }
.diag-liste li, .carte-liste li, .suivi-kpi div, .ia-q { box-shadow: 0 10px 22px -18px rgba(20, 35, 94, .5); }
.site-logo { background: url("/da/logo.svg") center / contain no-repeat !important; border-radius: 50% !important; }
.site-btn { background: var(--bleu) !important; }
.site-h1 { background: var(--marine); }
.site-cta { background: var(--bleu); }
.site-cartes div { background: linear-gradient(160deg, #EEF3FF, #DCE6FF); }
.site-prix-nb { color: var(--bleu-fonce); font-weight: 800; }
.carte-pin--vous i { background: var(--bleu); }
.carte-vous { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(79, 124, 255, .18); }
.ia-r { background: #fff; border: 2px solid var(--bleu); }
.ia-ligne { background: rgba(20, 35, 94, .12); }
.ia-signaux span { background: #fff; border-color: var(--ciel-2); color: var(--marine); font-weight: 600; }
.suivi-kpi b { color: var(--bleu); font-weight: 800; }

/* ---------- Ce que vous recevez (bleu) ---------- */
.offre { background: var(--bleu); color: #fff; }
.carte {
  background: #fff; color: var(--marine); border: 0; border-radius: var(--rayon);
  box-shadow: 0 30px 56px -32px rgba(20, 35, 94, .65);
}
.carte::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(79, 124, 255, .1), transparent 50%); }
.carte:hover, .offre .carte:hover { background: #fff; border-color: transparent; transform: translateY(-4px); }
.carte h3 { color: var(--marine); font-size: 1.3rem; }
.carte p { color: var(--doux); }
.carte-icone { width: 74px; height: 74px; border-radius: 22px; background: var(--ciel); border: 0; margin-bottom: 1.15rem; }
.carte-ico { width: 56px; height: 56px; filter: drop-shadow(0 8px 10px rgba(20, 35, 94, .2)); }
.carte-lien { color: var(--bleu-fonce); }
.carte--large { background: #fff; border: 0; padding: 0; overflow: hidden; display: grid; }
.carte--large > :not(.carte-photo) { margin-inline: 1.6rem; }
.carte--large .carte-icone { margin-top: 1.6rem; }
.carte--large p { margin-bottom: 1.7rem; }
.carte-photo { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.carte-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 1000px) {
  .carte--large { grid-template-columns: 360px auto 1fr; grid-template-rows: 1fr auto auto 1fr; gap: 0 1.6rem; align-items: center; }
  .carte--large .carte-photo { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; height: 100%; min-height: 270px; }
  .carte--large > :not(.carte-photo) { margin-inline: 0; }
  .carte--large .carte-icone { grid-column: 2; grid-row: 2 / span 2; margin: 0; }
  .carte--large h3 { grid-column: 3; grid-row: 2; align-self: end; margin-right: 2rem; }
  .carte--large p { grid-column: 3; grid-row: 3; align-self: start; margin: 0 2rem 0 0; }
}
.offre .carrousel-fleche { opacity: .7; }

/* ---------- Réalisations ---------- */
.realisations { background: var(--ciel); }
.realisation { border-radius: var(--rayon); box-shadow: 0 30px 60px -38px rgba(20, 35, 94, .5); }
.realisation:hover { box-shadow: 0 46px 80px -40px rgba(20, 35, 94, .55); }
.realisation-ecran { background: var(--ciel-2); }
.realisation-type {
  width: fit-content; background: var(--ciel); color: var(--bleu-fonce); font-weight: 800;
  font-size: .68rem; padding: .4rem .7rem; border-radius: 999px;
}
.realisation h3 { color: var(--marine); }
.realisation p { color: var(--doux); }
.realisation-lien { color: var(--bleu-fonce); font-weight: 700; }
.realisations-note { color: var(--doux); }

/* ---------- L'équipe ---------- */
.equipe { background: #fff; }
.fondateur-photo { border-radius: var(--rayon); background: var(--ciel); box-shadow: 0 36px 70px -44px rgba(20, 35, 94, .6); }
.fondateur h3 { color: var(--marine); }
.fondateur-role {
  display: block; width: fit-content; background: var(--bleu); color: #fff; -webkit-text-fill-color: #fff;
  -webkit-background-clip: border-box; background-clip: border-box;
  padding: .45rem .8rem; border-radius: 999px; font-size: .68rem; font-weight: 800; line-height: 1.2;
}
.fondateur-texte p:last-child { color: var(--doux); }
.equipe-image { border-radius: 30px; box-shadow: 0 44px 80px -50px rgba(20, 35, 94, .6); }

/* ---------- Notre histoire ---------- */
.histoire { background: var(--ciel); }
.histoire-photo { margin: 1.6rem 0 0; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--ombre); max-width: 420px; }
.histoire-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.histoire-recit { color: var(--marine); }
.histoire-reperes { border-top: 0; padding-top: .4rem; grid-template-columns: 1fr; gap: .8rem; }
.histoire-reperes div {
  background: #fff; border-radius: 20px; padding: 1rem 1.1rem;
  grid-template-columns: auto 1fr; column-gap: .9rem; align-items: center;
  box-shadow: 0 16px 30px -24px rgba(20, 35, 94, .55);
}
.repere-ico { grid-row: span 2; width: 50px; height: 50px; }
.histoire-reperes b { color: var(--marine); font-weight: 800; font-size: 1.3rem; }
.histoire-reperes span { color: var(--doux); }
@media (min-width: 900px) {
  .histoire-photo { aspect-ratio: 4 / 4.2; }
  .histoire-reperes { grid-template-columns: repeat(3, 1fr); }
  .histoire-reperes div { grid-template-columns: 1fr; align-content: start; padding: 1.2rem 1.15rem 1.25rem; }
  .repere-ico { grid-row: auto; margin-bottom: .55rem; }
}

/* ---------- Comment ça se passe (bleu) ---------- */
.parcours { background: var(--bleu); color: #fff; }
.parcours-liste li {
  background: #fff; color: var(--marine); border: 0; padding: 0; overflow: hidden;
  grid-template-columns: 1fr; gap: .75rem; box-shadow: 0 30px 56px -32px rgba(20, 35, 94, .65);
}
.parcours-liste li:hover { background: #fff; border-color: transparent; transform: translateY(-4px); }
.parcours-photo { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.parcours-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.parcours-nb {
  position: relative; margin: -2.4rem 0 0 1.4rem; width: 50px; height: 50px; font-size: 1.15rem; font-weight: 800;
  background: var(--bleu); border: 4px solid #fff;
}
.parcours-liste li > div { padding: 0 1.5rem 1.7rem; }
.parcours-liste h3 { color: var(--marine); }
.parcours-liste p { color: var(--doux); }
.parcours-sous { color: rgba(255, 255, 255, .88); font-weight: 600; }
.parcours-action .visages { margin: 0 0 1.4rem; }
@media (min-width: 900px) {
  .parcours-liste { grid-template-rows: auto auto auto 1fr; }
  .parcours-liste li { grid-row: span 4; padding: 0; gap: .75rem; }
}

/* ---------- Le blog : des cartes photo, titres en encadrés comme sur Instagram ---------- */
.blog-accueil { background: #fff; border-top: 0; }
.guide-carte { background: var(--ciel); border: 0; border-radius: var(--rayon); }
.guide-carte h2, .guide-carte h3 { color: var(--marine); }
.guide-carte--photo {
  position: relative; overflow: hidden; min-height: 440px; padding: 1.15rem 1.1rem 1.2rem;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 0;
  background: var(--marine); color: #fff; box-shadow: 0 30px 56px -36px rgba(20, 35, 94, .7);
}
.guide-carte--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 35, 94, .35) 0%, rgba(20, 35, 94, 0) 22%, rgba(20, 35, 94, 0) 40%, rgba(20, 35, 94, .55) 72%, rgba(20, 35, 94, .82) 100%);
}
.guide-photo { position: absolute; inset: 0; height: 100%; }
.guide-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform 1.2s var(--courbe); }
.guide-carte--photo:hover .guide-photo img { transform: scale(1.05); }
.guide-carte--photo > :not(.guide-photo) { position: relative; z-index: 2; }
.guide-carte--photo .sur { margin-bottom: .75rem; font-size: .62rem; padding: .5rem .8rem .46rem; }
.blog-accueil .guide-carte--photo h3 { font-size: 1.12rem; line-height: 1.42; letter-spacing: -.02em; margin: 0 0 .55rem; color: var(--marine); }
.guide-carte--photo h3 span {
  background: #fff; color: var(--marine); padding: .05em .26em .09em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.guide-carte--photo p { font-size: .82rem; line-height: 1.62; color: #fff; }
.guide-carte--photo p span {
  background: var(--marine); padding: .14em .34em .18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.guide-carte--photo .realisation-lien {
  margin-top: .9rem; background: var(--bleu); color: #fff; font-size: .82rem; font-weight: 700;
  padding: .5rem .95rem; border-radius: 999px;
}
.guide-carte--photo:hover { transform: translateY(-4px); background: var(--marine); }
.blog-accueil .texte a { border-bottom-color: var(--bleu); }

/* ---------- Questions ---------- */
.questions { background: var(--ciel); }
.faq { border-top: 0; display: grid; gap: .7rem; }
.faq details {
  background: #fff; border: 0; border-radius: 20px; padding: 0 1.3rem;
  box-shadow: 0 14px 30px -26px rgba(20, 35, 94, .6);
}
.faq summary { font-weight: 700; color: var(--marine); padding: 1.2rem 3rem 1.2rem 0; }
.faq summary::after {
  border: 0; width: 30px; height: 30px; right: 0; margin-top: -15px; border-radius: 50%; transform: none;
  background: var(--ciel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2v8M2 6h8' stroke='%233661E0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.faq details[open] summary::after {
  transform: rotate(45deg); margin-top: -15px;
  background-color: var(--bleu);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2v8M2 6h8' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.faq-rep { color: var(--doux); }
.faq-rep a { color: var(--marine); border-bottom-color: var(--bleu); }

/* ---------- Contact (bleu) ---------- */
.contact { background: var(--bleu); color: #fff; }
.contact-image { border-radius: 30px; box-shadow: 0 44px 80px -40px rgba(20, 35, 94, .7); }
.contact-image img { aspect-ratio: 4 / 4.4; object-position: 50% 25%; }
@media (min-width: 900px) { .contact-image { max-width: 440px; justify-self: end; width: 100%; } }
.suivre { border-top-color: rgba(255, 255, 255, .3); }
.suivre p { color: rgba(255, 255, 255, .9); }
.contact .pied-social a { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }

/* ---------- Pied de page ---------- */
.pied { background: var(--marine); color: rgba(255, 255, 255, .72); border-top: 0; }
.pied-marque { font-weight: 800; }
.pied-titre { font-weight: 700; }
.pied-bas { border-top-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .6); }

/* ---------- Bouton WhatsApp ---------- */
.wa { background: var(--bleu); border: 3px solid #fff; box-shadow: 0 14px 30px -12px rgba(20, 35, 94, .55); }
.wa::before { display: none; }
.wa:hover, .wa:focus-visible { box-shadow: 0 18px 36px -12px rgba(20, 35, 94, .6); }

/* ---------- Rideau d'ouverture ---------- */
.intro-panneau { background: var(--bleu); }
html.intro-joue .intro-halo { background: radial-gradient(circle, rgba(255, 255, 255, .32), rgba(255, 255, 255, .08) 40%, transparent 68%); }
html.intro-joue .intro-logo { width: 92px; height: 92px; filter: drop-shadow(0 16px 26px rgba(20, 35, 94, .4)); }
.intro-logo circle { stroke: #fff; stroke-width: 8; }
.intro-nom { font-weight: 800; }
html.intro-joue .intro-ligne { background: #fff; }

/* ---------- Pages de service, guides, appel final ---------- */
.page-hero { background: var(--ciel); color: var(--marine); }
.page-hero { padding-bottom: calc(clamp(3.5rem, 7vw, 5.5rem) + 40px); }
.page-hero::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 46C420 -4 900 128 1440 34V140H0Z' fill='%23DCE6FF'/%3E%3Cpath d='M0 98C480 54 960 150 1440 86V140H0Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center bottom / 100% clamp(60px, 8vw, 120px) no-repeat; }
.page-hero .titre { color: var(--marine); }
.page-hero .texte { color: var(--doux); }
.page-meta { color: var(--doux); }
.page-meta a { border-bottom-color: rgba(20, 35, 94, .3); }
.page-meta a:hover { color: var(--marine); }
.fil { color: var(--doux); }
.fil a:hover { color: var(--marine); }
.fil [aria-current] { color: var(--marine); font-weight: 600; }
.prose h2, .prose h3 { color: var(--marine); }
.prose p { color: #33405F; }
.prose a { color: var(--marine); border-bottom-color: var(--bleu); }
.encart { background: var(--ciel); border-left: 5px solid var(--bleu); border-image: none; border-radius: 6px 18px 18px 6px; }
.encart p { color: #33405F; }
.appel { background: var(--bleu); }
.appel .texte { color: rgba(255, 255, 255, .9); }
.rs-compte b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--bleu); -webkit-text-fill-color: var(--bleu); font-weight: 800; }
.rs-compte div, .rs-compte--fort div { background: var(--ciel); border-color: transparent; }
.rs-reseau, .rs-porte, .rs-etapes li { border-color: var(--ciel-2); border-radius: 20px; }
.tableau th { background: var(--ciel); }
.prose blockquote { border-left-color: var(--bleu); }
.prose .numerotee li::marker { color: var(--bleu); }

/* ---------- Petits écrans ---------- */
@media (max-width: 599px) {
  .hero { padding-top: calc(64px + 1.4rem); }
  .hero-sur { font-size: .6rem; padding: .5rem .8rem .46rem; margin-bottom: 1.1rem; }
  .hero-texte { font-size: 1.02rem; margin-top: 1.2rem; }
  .hero-actions { margin-top: 1.5rem; }
  .hero-visuel { padding-bottom: 12.5rem; }
  .hero-photo { width: 82%; }
  .hero-sourire { width: 38%; top: 10%; }
  .hero-appareil { width: 96%; }
  .appareil-barre { display: none; }
  .bulle { font-size: .82rem; }
  .bulle--patient { margin-left: 8%; }
  .offre .carrousel[data-actif] { --voile: 1rem; }
  .guide-carte--photo { min-height: 400px; }
  .visages img { width: 64px; height: 64px; }
}

/* ---------- L'équipe : en-tête et grande photo, puis les deux fiches ---------- */
.equipe-gauche .texte--centre { text-align: left; margin-inline: 0; }
.equipe-image { margin: 1.4rem 0 0; }
.equipe-image img { aspect-ratio: 16 / 9; }
.equipe-grille { margin-top: 2rem; }

/* ==========================================================================
   ÉCRANS (03/10/2026) : sur ordinateur, chaque partie tient
   dans un écran, sous la barre du haut, et les photos prennent la hauteur du
   texte d'à côté. Les tailles suivent la hauteur de l'écran (vh), pas
   seulement sa largeur : un portable de 800 px de haut voit tout d'un coup.
   ========================================================================== */
@media (min-width: 960px) {
  :root { --section: clamp(2.4rem, 6.5vh, 4.5rem); --ecran: min(calc(100svh - 64px), 980px); }
  html { scroll-padding-top: 64px; }
  .titre { font-size: clamp(1.8rem, min(2.8vw, 5.1vh), 2.75rem); margin-bottom: 1rem; }
  .sur { margin-bottom: .95rem; }
  .texte { font-size: clamp(.96rem, 1.9vh, 1.1rem); }

  /* une partie = un écran, contenu centré dans la hauteur */
  .constat, .voie, .offre, .realisations, .equipe, .histoire, .parcours, .blog-accueil, .questions, .contact {
    min-height: var(--ecran); display: flex; flex-direction: column; justify-content: center;
    padding-block: var(--section);
  }

  /* Ouverture : avec le bandeau, exactement un écran */
  .hero { min-height: calc(100svh - 60px); display: grid; align-content: center; padding: calc(64px + 1.2rem) 0 clamp(3rem, 8vh, 5rem); }
  .hero-titre { font-size: clamp(2.3rem, min(4.3vw, 7.2vh), 4.1rem); }
  .hero-texte { font-size: clamp(.98rem, 2.1vh, 1.18rem); margin-top: 1.2rem; }
  .hero-actions { margin-top: 1.6rem; }
  .hero-visuel { padding-bottom: 3.6rem; }
  .hero-photo { width: auto; max-width: none; height: clamp(320px, calc(100svh - 330px), 580px); }

  /* Ce qui a changé : titre + photo à gauche (la photo remplit la hauteur des chiffres) */
  .constat-grille { display: grid; grid-template-columns: .92fr 1.35fr; gap: 2.6rem; align-items: stretch; }
  .constat-gauche { display: flex; flex-direction: column; }
  .constat .titre { font-size: clamp(1.75rem, min(2.4vw, 4.5vh), 2.45rem); }
  .chiffres-photo { flex: 1 1 0; min-height: 170px; aspect-ratio: auto; }
  .chiffres-photo picture { height: 100%; }
  .chiffres { margin-top: 0; gap: .9rem; }
  .chiffre { padding: 1.3rem 1.35rem 1.2rem; }
  .chiffre-nb { font-size: clamp(1.9rem, 4.5vh, 2.8rem); padding-right: 56px; }
  .chiffre-nb--date { font-size: clamp(1.35rem, 3vh, 1.8rem); }
  .chiffre-texte { font-size: .95rem; margin-top: .6rem; }
  .chiffre-ico { width: 52px; height: 52px; }

  /* Notre conviction : la photo a la hauteur du texte */
  .voie-grille { grid-template-columns: 1.25fr .85fr; gap: 3.5rem; align-items: stretch; }
  .voie .titre { font-size: clamp(1.75rem, min(2.6vw, 4.7vh), 2.6rem); max-width: 21ch; }
  .voie .texte { font-size: clamp(.94rem, 1.8vh, 1.05rem); }
  .voie .texte + .texte { margin-top: .7rem; }
  .sur--puces { margin-top: 1.3rem; margin-bottom: .6rem; }
  .voie .puces { margin-top: .6rem; gap: .45rem; }
  .voie .puces li { font-size: .94rem; }
  .voie-image { max-width: none; width: 100%; height: 100%; justify-self: stretch; }
  .voie-image picture { height: 100%; }
  .voie-image img { aspect-ratio: auto; height: 100%; min-height: 360px; object-position: 50% 35%; }

  /* Manifeste : un écran bleu */
  .manifeste-texte { font-size: clamp(1.9rem, min(3.6vw, 6.4vh), 3.3rem); }

  /* La méthode : défilement en 5 étapes, l'illustration occupe l'écran pendant tout le défilement */
  .methode-grille { margin-top: 2rem; }
  .etape { min-height: calc((100svh - 64px) / 2); padding: 2rem 0; }
  .methode-cadre { top: calc(64px + 1.5rem); height: min(calc(100svh - 64px - 3rem), 640px); }

  /* Ce que vous recevez : titre et carte « résultat » côte à côte, puis le ruban des cartes */
  .offre > .int { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.6rem; align-items: center; }
  .offre .sur { grid-column: 1; margin-inline: 0; }
  .offre .titre { grid-column: 1; text-align: left; margin: 0; max-width: none; font-size: clamp(1.75rem, min(2.5vw, 4.6vh), 2.5rem); }
  .offre .titre br { display: none; }
  .offre .cartes { display: contents; }
  .offre .carrousel { grid-column: 1 / -1; margin-top: 1.7rem; }
  .offre .carte--large {
    grid-column: 2; grid-row: 1 / 3; align-self: stretch;
    grid-template-columns: 40% 1fr; grid-template-rows: 1fr auto auto 1fr; gap: 0 1.4rem;
  }
  .offre .carte--large .carte-photo { grid-column: 1; grid-row: 1 / -1; height: 100%; min-height: 0; aspect-ratio: auto; }
  .offre .carte--large .carte-photo picture { height: 100%; }
  .offre .carte--large .carte-icone { display: none; }
  .offre .carte--large h3 { grid-column: 2; grid-row: 2; font-size: 1.2rem; margin: 1.3rem 1.4rem .5rem 0; }
  .offre .carte--large p { grid-column: 2; grid-row: 3; font-size: .92rem; margin: 0 1.4rem 1.3rem 0; }
  .carrousel .carte { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-content: start; padding: 1.3rem 1.35rem 1.35rem; }
  .carrousel .carte .carte-icone { width: 56px; height: 56px; border-radius: 16px; margin: 0; }
  .carrousel .carte .carte-ico { width: 42px; height: 42px; }
  .carrousel .carte h3 { align-self: center; margin: 0; font-size: 1.12rem; }
  .carrousel .carte p, .carrousel .carte .carte-lien { grid-column: 1 / -1; }
  .carrousel .carte p { margin-top: .8rem; font-size: .92rem; }
  .carrousel-barre { margin: .7rem 0 0; }

  /* Exemples : titre à gauche, présentation à droite, captures à hauteur d'écran */
  .realisations > .int:first-child { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; align-items: end; }
  .realisations > .int:first-child > .sur { grid-column: 1; margin-inline: 0; }
  .realisations > .int:first-child > .titre { grid-column: 1; text-align: left; margin: 0; max-width: none; }
  .realisations > .int:first-child > .texte { grid-column: 2; grid-row: 1 / 3; text-align: left; margin: 0; }
  .realisations .carrousel { margin-top: 1.6rem; }
  .realisation-ecran { aspect-ratio: auto; height: clamp(170px, 25vh, 300px); }
  .realisation-texte { padding: 1.05rem 1.3rem 1.15rem; gap: .3rem; }
  .realisation h3 { font-size: 1.2rem; }
  .realisation p { font-size: .9rem; }
  .realisations-note { margin-top: .5rem; font-size: .84rem; max-width: 110ch; }

  /* L'équipe : à gauche le texte et la photo des deux (elle remplit la hauteur), à droite les deux fiches */
  .equipe-ecran { display: grid; grid-template-columns: 1fr 1.08fr; gap: 3rem; align-items: stretch; }
  .equipe-gauche { display: flex; flex-direction: column; }
  .equipe-gauche .texte { font-size: clamp(.94rem, 1.8vh, 1.04rem); }
  .equipe-image { flex: 1 1 0; min-height: 190px; }
  .equipe-image picture { height: 100%; }
  .equipe-image img { aspect-ratio: auto; height: 100%; }
  .equipe-grille { margin-top: 0; grid-template-columns: 1fr; gap: 1.3rem; align-content: center; }
  .equipe .fondateur { grid-template-columns: 150px 1fr; gap: 1.3rem; }
  .equipe .fondateur-photo { min-height: 0; }
  .equipe .fondateur h3 { font-size: 1.35rem; }
  .equipe .fondateur-role { margin: .35rem 0 .6rem; }
  .equipe .fondateur-texte p:last-child { font-size: .9rem; line-height: 1.52; }

  /* Notre histoire : la photo remplit la hauteur du récit */
  .histoire-grille { grid-template-columns: .85fr 1.15fr; gap: 3.5rem; align-items: stretch; }
  .histoire-colonne:first-child { position: static; display: flex; flex-direction: column; }
  .histoire-photo { flex: 1 1 0; min-height: 220px; aspect-ratio: auto; max-width: none; margin-top: .4rem; }
  .histoire-photo picture { height: 100%; }
  .histoire-recit { font-size: clamp(.94rem, 1.85vh, 1.06rem); gap: .8rem; align-content: center; }
  .histoire-reperes { margin-top: .5rem; }
  .histoire-reperes div { padding: 1rem 1.05rem 1.05rem; }
  .repere-ico { width: 44px; height: 44px; margin-bottom: .4rem; }
  .histoire-reperes b { font-size: 1.15rem; }

  /* Comment ça se passe */
  .parcours-liste { margin-top: 1.8rem; }
  .parcours-photo { aspect-ratio: auto; height: clamp(120px, 19vh, 210px); }
  .parcours-liste li > div { padding: 0 1.4rem 1.4rem; }
  .parcours-liste h3 { font-size: 1.12rem; }
  .parcours-liste p { font-size: .93rem; }
  .parcours-action { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: 1.8rem; }
  .parcours-action .visages { margin: 0; }
  .parcours-action .visages img { width: 56px; height: 56px; border-width: 3px; }
  .parcours-sous { margin: 0; }

  /* Le blog : titre à gauche, présentation à droite, cartes à hauteur d'écran */
  .blog-accueil > .int { display: grid; grid-template-columns: 1.3fr .7fr; column-gap: 3rem; align-items: end; }
  .blog-accueil .int > .sur { grid-column: 1; }
  .blog-accueil .int > .titre { grid-column: 1; margin: 0; max-width: none; }
  .blog-accueil .int > .titre + .texte { grid-column: 2; grid-row: 1 / 3; }
  .blog-accueil .guides-grille { grid-column: 1 / -1; margin-top: 1.6rem; }
  .blog-accueil .int > .texte:last-child { grid-column: 1 / -1; margin-top: 1.1rem !important; font-size: .95rem; }
  .guide-carte--photo { min-height: clamp(300px, 46vh, 440px); }

  /* Questions : la liste resserrée */
  .questions-grille { grid-template-columns: .75fr 1.25fr; gap: 3.5rem; align-items: center; }
  .questions-grille > div:first-child { position: static; }
  .faq { gap: .45rem; }
  .faq details { padding: 0 1.2rem; border-radius: 16px; }
  .faq summary { padding: .78rem 3rem .78rem 0; font-size: 1rem; }
  .faq summary::after { width: 26px; height: 26px; margin-top: -13px; }
  .faq details[open] summary::after { margin-top: -13px; }
  .faq-rep { padding-bottom: 1rem; font-size: .95rem; }

  /* Contact : la photo a la hauteur du texte */
  .contact-int { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: stretch; }
  .contact-texte { align-self: center; }
  .contact-image { max-width: none; height: 100%; }
  .contact-image picture { height: 100%; }
  .contact-image img { aspect-ratio: auto; height: 100%; min-height: 360px; }
}

/* Réglages fins des deux parties les plus chargées */
@media (min-width: 960px) {
  .offre > .int { grid-template-columns: .9fr 1.1fr; }
  .offre .carte--large { grid-template-columns: 34% 1fr; }
  .offre .carte--large h3 { margin-top: 1.1rem; font-size: 1.15rem; }
  .offre .carte--large p { font-size: .9rem; margin-bottom: 1.1rem; }
  .offre .carrousel { margin-top: 1.4rem; }
  .carrousel .carte p { font-size: .9rem; line-height: 1.5; margin-top: .7rem; }
  .carrousel .carte .carte-lien { margin-top: .7rem; font-size: .9rem; }
  .offre .carrousel-piste, .realisations .carrousel-piste { padding-bottom: 14px; }
  .realisation-ecran { height: clamp(160px, 22vh, 290px); }
  .realisation-texte { padding: .95rem 1.25rem 1.05rem; }
  .realisation-type { font-size: .64rem; padding: .34rem .65rem; }
  .realisation p { font-size: .88rem; line-height: 1.5; }
  .realisation-lien { margin-top: .2rem; font-size: .9rem; }
}
/* Écrans d'ordinateur peu hauts (13 pouces, fenêtre réduite) : tout se resserre encore */
@media (min-width: 960px) and (max-height: 760px) {
  :root { --section: clamp(1.8rem, 5vh, 3rem); }
  .offre .carrousel, .realisations .carrousel { margin-top: 1rem; }
  .titre, .offre .titre, .voie .titre, .constat .titre { font-size: clamp(1.6rem, 4.6vh, 2.2rem); }
  .carrousel .carte h3 { font-size: 1.02rem; }
  .carrousel .carte p, .offre .carte--large p, .realisation p, .parcours-liste p { font-size: .85rem; }
  .parcours-photo { height: 16vh; }
  .faq summary { padding-block: .65rem; font-size: .95rem; }
  .faq-rep { font-size: .9rem; }
  .voie .texte, .voie .puces li { font-size: .9rem; }
}

/* Équilibre texte / photo : le texte grandit avec la hauteur de l'écran, la photo prend exactement sa hauteur */
@media (min-width: 960px) {
  .voie-image .etiquette-ico { width: 46px; height: 46px; min-height: 0; aspect-ratio: 1; }
  .histoire-colonne:first-child { align-self: stretch; }
  .voie-texte { align-self: center; }

  .voie .titre { font-size: clamp(1.75rem, min(2.8vw, 5.4vh), 2.8rem); }
  .voie .texte { font-size: clamp(.95rem, 2.15vh, 1.15rem); }
  .voie .puces li { font-size: clamp(.92rem, 2.05vh, 1.08rem); }

  .chiffre { padding: clamp(1.1rem, 3.2vh, 2rem) clamp(1.1rem, 2.4vh, 1.6rem); }
  .chiffre-nb { font-size: clamp(1.9rem, 5.6vh, 3rem); }
  .chiffre-nb--date { font-size: clamp(1.35rem, 3.6vh, 2rem); }
  .chiffre-texte { font-size: clamp(.9rem, 2vh, 1.05rem); }
  .chiffre-ico { width: clamp(46px, 7vh, 64px); height: clamp(46px, 7vh, 64px); }

  .equipe-gauche .texte { font-size: clamp(.94rem, 2.05vh, 1.1rem); }
  .equipe .fondateur-texte p:last-child { font-size: clamp(.88rem, 1.95vh, 1rem); }
  .equipe .fondateur { grid-template-columns: clamp(130px, 21vh, 190px) 1fr; }

  .histoire-recit { font-size: clamp(.94rem, 2.1vh, 1.12rem); }

  .contact .titre { font-size: clamp(1.9rem, min(3.4vw, 6.2vh), 3.2rem); }
  .contact .texte { font-size: clamp(.98rem, 2.2vh, 1.15rem); }
  .contact-image img { min-height: 0; }
}
@media (min-width: 960px) and (max-height: 760px) {
  .voie .titre { font-size: clamp(1.6rem, 4.8vh, 2.3rem); }
}

/* La photo suit la hauteur du texte, jamais l'inverse : l'image ne pèse plus dans la hauteur de la ligne */
@media (min-width: 960px) {
  .voie-image, .contact-image { position: relative; }
  .voie-image > picture, .contact-image > picture { position: absolute; inset: 0; height: 100%; }
  .voie-image > picture img, .contact-image > picture img { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; }
  .voie-image { min-height: 340px; }
  .contact-image { min-height: 320px; }
  .contact-image img { object-position: 50% 30%; }
}

/* La méthode : en-tête en haut de la colonne des étapes */
.methode-tete .sur { margin-inline: 0; }
.methode-tete .titre { text-align: left; margin-inline: 0; }
.methode-tete .texte--centre { text-align: left; margin-inline: 0; }
.methode-grille { margin-top: 0; }
@media (min-width: 960px) {
  .methode-tete { padding-bottom: 1.5rem; }
  .methode-tete .titre { max-width: 18ch; }
  .methode-etapes .etape:nth-child(2) { border-top: 1px solid var(--ligne); }
}

/* Manifeste : une bande bleue, pas un écran entier (retour du 03/10 : « trop haute ») */
@media (min-width: 960px) {
  .manifeste { min-height: 0; padding-block: clamp(3.2rem, 10vh, 6rem); }
  .manifeste-texte { font-size: clamp(1.7rem, min(3vw, 5.2vh), 2.7rem); max-width: 30ch; }
  .manifeste .visages { margin-top: 1.6rem; }
}


/* ==========================================================================
   PAGES INTÉRIEURES (03/10/2026, retour : « que ça donne envie de lire ») :
   en-tête avec photos et icônes 3D, sommaire qui suit la lecture, intertitres
   avec icône, sous-parties en cartes, photos entre les parties, articles en
   photo, apparitions douces (da.js). Aucun mot ajouté.
   ========================================================================== */

/* Pastilles plus fines partout, et lisibles dans le texte (avant : grosses, texte marine sur bleu) */
.sur, .hero-sur { font-size: .68rem; padding: .52rem .92rem .48rem; letter-spacing: .1em; }
.prose .sur, .page-corps .sur, .rs-demo-mot .sur, .prose p.sur {
  color: #fff; -webkit-text-fill-color: #fff; font-size: .66rem; line-height: 1.25; font-weight: 800;
  letter-spacing: .1em; padding: .5rem .88rem .46rem; margin: 0 0 .8rem; border: 0;
}
.prose .sur--clair { background: var(--ciel); color: var(--bleu-fonce); -webkit-text-fill-color: var(--bleu-fonce); }

/* ---------- En-tête : texte, et à droite les photos ---------- */
.page-hero--visuel { padding: calc(64px + clamp(1.6rem, 4vw, 3rem)) 0 clamp(4rem, 8vw, 5.5rem); }
.ph-grille { display: grid; gap: 2.6rem; align-items: center; }
.ph-texte .titre { font-size: clamp(2rem, 4.2vw, 3.3rem); max-width: 19ch; }
.ph-texte .texte { max-width: 62ch; }
.page-meta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.2rem; padding: .45rem .85rem; border-radius: 999px; background: #fff; color: var(--doux); font-size: .8rem; font-weight: 600; box-shadow: 0 10px 24px -18px rgba(20, 35, 94, .5); }
.page-hero .bouton--contour { border: 2px solid var(--ciel-2); color: var(--bleu-fonce); background: #fff; }
.page-hero .bouton--contour:hover { border-color: var(--bleu); color: var(--marine); background: #fff; }
.ph-visuel { position: relative; padding: 0 0 2.4rem 2.6rem; max-width: 470px; justify-self: end; width: 100%; }
.ph-photo { margin: 0; width: 100%; aspect-ratio: 4 / 4.3; border-radius: 30px; overflow: hidden; background: var(--ciel-2); box-shadow: 0 44px 80px -42px rgba(20, 35, 94, .6); }
.ph-photo picture { height: 100%; }
.ph-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; transform: scale(1.08); will-change: transform; }
.ph-mini { position: absolute; left: 0; bottom: 0; width: 40%; aspect-ratio: 1; margin: 0; border-radius: 22px; overflow: hidden; border: 5px solid #fff; transform: rotate(-4deg); box-shadow: 0 24px 44px -20px rgba(20, 35, 94, .55); }
.ph-mini picture { height: 100%; }
.ph-mini img { width: 100%; height: 100%; object-fit: cover; }
.ph-ico { position: absolute; z-index: 3; height: auto; filter: drop-shadow(0 18px 18px rgba(20, 35, 94, .28)); pointer-events: none; }
.ph-ico--1 { width: clamp(76px, 8vw, 108px); right: -18px; top: -26px; }
.ph-ico--2 { width: clamp(56px, 5.6vw, 78px); right: 14%; bottom: 0; }
html.anime .ph-photo { animation: ph-entre 1.1s var(--courbe) both; }
html.anime .ph-mini { animation: ph-mini 1s var(--courbe) .3s both; }
html.anime .ph-ico--1 { animation: ph-pop .8s var(--courbe) .5s both, flotte 6s ease-in-out 1.3s infinite alternate; }
html.anime .ph-ico--2 { animation: ph-pop .8s var(--courbe) .7s both, flotte 5s ease-in-out 1.5s infinite alternate-reverse; }
@keyframes ph-entre { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ph-mini { from { opacity: 0; transform: translate(-16px, 16px) rotate(-10deg); } to { opacity: 1; transform: rotate(-4deg); } }
@keyframes ph-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@media (min-width: 960px) {
  .page-hero--visuel { min-height: min(100svh, 880px); display: grid; align-content: center; }
  .ph-grille { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; align-items: stretch; }
  .ph-texte { align-self: center; }
  /* la photo a la hauteur du texte d'à côté */
  .ph-visuel { display: flex; align-items: stretch; }
  .ph-photo { aspect-ratio: auto; min-height: 380px; max-height: 620px; }
}
@media (max-width: 959px) {
  .ph-visuel { justify-self: center; max-width: 380px; padding-left: 2rem; }
  .ph-ico--1 { right: -6px; }
}

/* ---------- Le texte : colonne de lecture + sommaire ---------- */
.corps-grille { display: block; }
.sommaire { display: none; }
@media (min-width: 1100px) {
  .corps-grille { display: grid; grid-template-columns: minmax(0, 760px) 250px; gap: 5rem; justify-content: space-between; align-items: start; }
  .sommaire { display: block; position: sticky; top: 104px; }
}
.sommaire::before { content: ""; display: block; width: 46px; height: 46px; margin: 0 0 .9rem .9rem; background: url("/da/icones/page.webp") center / contain no-repeat; filter: drop-shadow(0 8px 10px rgba(20, 35, 94, .2)); }
.sommaire ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ciel-2); display: grid; gap: .1rem; }
.sommaire a { display: block; padding: .45rem .4rem .45rem 1rem; margin-left: -2px; border-left: 2px solid transparent; font-size: .86rem; line-height: 1.35; color: var(--doux); transition: color .3s, border-color .3s, background .3s; border-radius: 0 10px 10px 0; }
.sommaire a:hover { color: var(--marine); background: var(--ciel); }
.sommaire a.actif { color: var(--marine); font-weight: 700; border-left-color: var(--bleu); background: var(--ciel); }

.page-corps .prose > h2:first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.55rem, 2.5vw, 2.15rem); line-height: 1.12; margin: 3.4rem 0 1.1rem; scroll-margin-top: 92px; max-width: 26ch; }
.prose h2[data-ico]::before {
  content: ""; display: block; width: 60px; height: 60px; margin-bottom: 1rem; border-radius: 19px;
  background: var(--ciel) var(--ico) center / 42px no-repeat; box-shadow: inset 0 0 0 1px rgba(79, 124, 255, .1);
}
.prose h2[data-ico="ampoule"] { --ico: url("/da/icones/ampoule.webp"); }
.prose h2[data-ico="appareil"] { --ico: url("/da/icones/appareil.webp"); }
.prose h2[data-ico="balance"] { --ico: url("/da/icones/balance.webp"); }
.prose h2[data-ico="bulle"] { --ico: url("/da/icones/bulle.webp"); }
.prose h2[data-ico="cafe"] { --ico: url("/da/icones/cafe.webp"); }
.prose h2[data-ico="calendrier"] { --ico: url("/da/icones/calendrier.webp"); }
.prose h2[data-ico="carte"] { --ico: url("/da/icones/carte.webp"); }
.prose h2[data-ico="cle"] { --ico: url("/da/icones/cle.webp"); }
.prose h2[data-ico="coche"] { --ico: url("/da/icones/coche.webp"); }
.prose h2[data-ico="courbe"] { --ico: url("/da/icones/courbe.webp"); }
.prose h2[data-ico="croix"] { --ico: url("/da/icones/croix.webp"); }
.prose h2[data-ico="dent"] { --ico: url("/da/icones/dent.webp"); }
.prose h2[data-ico="epingle"] { --ico: url("/da/icones/epingle.webp"); }
.prose h2[data-ico="etoile"] { --ico: url("/da/icones/etoile.webp"); }
.prose h2[data-ico="euro"] { --ico: url("/da/icones/euro.webp"); }
.prose h2[data-ico="fusee"] { --ico: url("/da/icones/fusee.webp"); }
.prose h2[data-ico="horloge"] { --ico: url("/da/icones/horloge.webp"); }
.prose h2[data-ico="lettre"] { --ico: url("/da/icones/lettre.webp"); }
.prose h2[data-ico="loupe"] { --ico: url("/da/icones/loupe.webp"); }
.prose h2[data-ico="maison"] { --ico: url("/da/icones/maison.webp"); }
.prose h2[data-ico="mobile"] { --ico: url("/da/icones/mobile.webp"); }
.prose h2[data-ico="ordinateur"] { --ico: url("/da/icones/ordinateur.webp"); }
.prose h2[data-ico="page"] { --ico: url("/da/icones/page.webp"); }
.prose h2[data-ico="robot"] { --ico: url("/da/icones/robot.webp"); }
.prose h2[data-ico="sablier"] { --ico: url("/da/icones/sablier.webp"); }
.prose h2[data-ico="telephone"] { --ico: url("/da/icones/telephone.webp"); }
.prose h2[data-ico="trophee"] { --ico: url("/da/icones/trophee.webp"); }
.page-corps .prose > h2:first-child + p { font-size: 1.16rem; color: var(--marine); }
.prose p { font-size: 1.05rem; line-height: 1.75; }

/* sous-parties en cartes numérotées */
.cartes-h3 { display: grid; gap: .9rem; margin: 1.5rem 0 1.8rem; counter-reset: c; }
@media (min-width: 700px) { .cartes-h3 { grid-template-columns: 1fr 1fr; } .carte-h3:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.carte-h3 { counter-increment: c; background: var(--ciel); border-radius: 20px; padding: 1.3rem 1.35rem 1.35rem; transition: transform .45s var(--courbe), box-shadow .45s var(--courbe), opacity .8s var(--courbe); }
.carte-h3:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -30px rgba(20, 35, 94, .55); }
.prose .carte-h3 h3 { display: flex; align-items: center; gap: .65rem; margin: 0 0 .55rem; font-size: 1.08rem; line-height: 1.3; }
.carte-h3 h3::before { content: counter(c, decimal-leading-zero); flex: none; background: var(--bleu); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .04em; padding: .32rem .55rem; border-radius: 999px; }
.prose .carte-h3 p { font-size: .97rem; line-height: 1.62; }
.prose .carte-h3 p + p { margin-top: .6rem; }

/* listes à puces en petites cartes cochées */
.prose .puces { display: grid; gap: .65rem; margin: 1.3rem 0 1.7rem; }
.prose .puces li { background: #fff; border: 1px solid var(--ciel-2); border-radius: 16px; padding: .95rem 1.1rem .95rem 3.1rem; color: #33405F; }
.prose .puces li::before {
  left: 1.05rem; top: 1.05rem; width: 22px; height: 22px; border-radius: 50%; transform: none;
  background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
@media (min-width: 760px) { .prose .puces:has(li:nth-child(4)) { grid-template-columns: 1fr 1fr; } }

/* listes numérotées en étapes */
.prose .numerotee { list-style: none; counter-reset: n; margin: 1.3rem 0 1.6rem; display: grid; gap: .7rem; }
.prose .numerotee li { counter-increment: n; position: relative; padding: 1rem 1.1rem 1rem 3.7rem; background: var(--ciel); border-radius: 16px; color: #33405F; }
.prose .numerotee li::before { content: counter(n); position: absolute; left: 1rem; top: .95rem; width: 30px; height: 30px; border-radius: 50%; background: var(--bleu); color: #fff; font-weight: 800; font-size: .85rem; display: grid; place-items: center; }

/* encadré « à retenir » avec une ampoule */
.prose .encart { position: relative; margin: 2rem 0; background: linear-gradient(135deg, #EEF3FF, #E2EAFF); border: 0; border-radius: 22px; padding: 1.4rem 1.5rem 1.45rem 5.2rem; }
.prose .encart::before { content: ""; position: absolute; left: 1.25rem; top: 1.2rem; width: 50px; height: 50px; background: url("/da/icones/ampoule.webp") center / contain no-repeat; filter: drop-shadow(0 8px 10px rgba(20, 35, 94, .2)); }
.prose .encart b { color: var(--marine); font-size: 1.05rem; }

/* photos entre les parties, qui bougent un peu au défilement */
.prose-photo { margin: 3rem 0 0; border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 8; background: var(--ciel-2); box-shadow: 0 40px 70px -46px rgba(20, 35, 94, .6); }
.prose-photo picture { height: 100%; }
.prose-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transform: scale(1.08); will-change: transform; }
.prose-photo + h2 { margin-top: 2.6rem; }

.prose blockquote { background: var(--ciel); border-left: 4px solid var(--bleu); border-radius: 0 16px 16px 0; padding: 1rem 1.2rem; color: var(--marine); }
.prose .tableau-cadre { border-radius: 16px; border: 1px solid var(--ciel-2); }
.prose ul.sources li { border-left-color: var(--bleu); }
.prose-action { margin-top: 2.2rem; }

/* articles et guides : cartes photo, titres en encadrés */
.guide-carte--photo h2, .guide-carte--photo h3 { font-size: 1.12rem; line-height: 1.42; letter-spacing: -.02em; margin: 0 0 .55rem; color: var(--marine); }
.guide-carte--photo h2 span { background: #fff; color: var(--marine); padding: .05em .26em .09em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.page-blog .guides-grille, .page-corps .prose > .guides-grille { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.page-blog .titre { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.page .prose { max-width: none; }

/* appel final : leurs deux visages */
.appel .visages { margin: 0 0 1.4rem; justify-content: center; }
.appel .visages img { width: 64px; height: 64px; }

/* ---------- Animations d'apparition (da.js) ---------- */
html.da-revele .da-r { transition: opacity .85s var(--courbe), transform .85s var(--courbe); }
html.da-revele .da-r:not(.da-vu) { opacity: 0; transform: translateY(26px); }
@media print { html.da-revele .da-r { opacity: 1 !important; transform: none !important; } }

/* barre de lecture sous la barre du haut */
.da-progres { position: fixed; left: 0; right: 0; top: 64px; height: 3px; z-index: 99; pointer-events: none; opacity: 0; transition: opacity .3s; }
.da-progres--on { opacity: 1; }
.da-progres i { display: block; height: 100%; background: linear-gradient(90deg, #7FA0FF, #3661E0); transform-origin: left center; transform: scaleX(0); }

/* ---------- Simulateur ---------- */
html body .simu .panneau { background: var(--ciel); border-radius: 26px; }
html body .simu .panneau--blanc { background: #fff; border: 1px solid var(--ciel-2); box-shadow: 0 40px 70px -48px rgba(20, 35, 94, .55); }
html body .simu .panneau h2 { display: flex; align-items: center; gap: .75rem; font-size: 1.45rem; color: var(--marine); }
html body .simu .panneau h2::before { content: ""; flex: none; width: 46px; height: 46px; background: url("/da/icones/maison.webp") center / contain no-repeat; filter: drop-shadow(0 8px 10px rgba(20, 35, 94, .2)); }
html body .simu .panneau h2 ~ h2::before { background-image: url("/da/icones/loupe.webp"); }
html body .simu .panneau--blanc h2::before { background-image: url("/da/icones/euro.webp"); }
html body .simu .q-lbl { color: var(--marine); font-weight: 700; }
html body .simu .pastilles button { border: 1.5px solid var(--ciel-2); color: var(--marine); background: #fff; }
html body .simu .pastilles button:hover { border-color: var(--bleu); }
html body .simu .pastilles button[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; box-shadow: 0 10px 20px -12px rgba(54, 97, 224, .9); }
html body input[type="range"].glisse { background: linear-gradient(90deg, #7FA0FF 0%, #3661E0 var(--p, 50%), #DCE6FF var(--p, 50%)); }
html body input[type="range"].glisse::-webkit-slider-thumb { border-color: var(--bleu); }
html body input[type="range"].glisse::-moz-range-thumb { border-color: var(--bleu); }
html body .simu .val { color: var(--bleu-fonce); }
html body .simu .nombre { border: 1.5px solid var(--ciel-2); color: var(--marine); border-radius: 12px; }
html body .simu .tarif { border-color: var(--ciel-2); }
html body .simu .res { background: var(--ciel); border: 0; border-image: none; border-radius: 18px; padding: 1rem 1rem 1.05rem; }
html body .simu .res-nb { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--bleu); -webkit-text-fill-color: var(--bleu); font-weight: 800; }
html body .simu .barre .piste { background: var(--ciel); }
html body .simu .barre .plein { background: linear-gradient(90deg, #7FA0FF, #3661E0); }
html body .simu .barre .plein--cout { background: #C9D6FF; }
html body .simu .phrase { background: var(--bleu); color: #fff; border-radius: 18px; }
html body .simu .phrase b { color: #fff; }
html body .simu .res-actions .bouton--plein { background: var(--bleu); }
html body .simu .lien { color: var(--marine); border-bottom-color: var(--bleu); }
html body section.sources { background: var(--ciel); border-top: 0; }
html body section.sources .etapes li { background: #fff; color: #33405F; box-shadow: 0 20px 40px -34px rgba(20, 35, 94, .5); }
html body section.sources .etapes li b { color: var(--marine); }
html body section.sources .src { gap: .6rem; }
@media (min-width: 900px) { html body section.sources .src { grid-template-columns: 1fr 1fr; } }
html body section.sources .src li { background: #fff; border: 0; border-radius: 16px; box-shadow: 0 14px 30px -26px rgba(20, 35, 94, .55); }
html body section.sources .src-titre { display: flex; align-items: center; gap: .6rem; color: var(--marine); }
html body section.sources .src-titre::before { content: ""; width: 34px; height: 34px; background: url("/da/icones/page.webp") center / contain no-repeat; }
html body .badge { background: var(--bleu); color: #fff; border-radius: 999px; padding: .2rem .55rem; }
html body .badge--estime { background: #fff; color: var(--bleu-fonce); box-shadow: inset 0 0 0 1.5px var(--ciel-2); }
html body .limites { background: #fff; border: 0; border-radius: 20px; }

/* ---------- Page introuvable ---------- */
html body .introuvable { background: var(--ciel); color: var(--marine); }
html body .introuvable::before { background: var(--vagues-clair) center bottom / 100% 100% no-repeat; }
html body .introuvable-code { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--bleu); -webkit-text-fill-color: var(--bleu); font-weight: 800; }
html body .introuvable .titre--clair { color: var(--marine); }
html body .introuvable .texte--clair { color: var(--doux); }
html body .introuvable-liens { color: var(--marine); }
html body .introuvable-liens a { border-bottom-color: var(--bleu); }
html body .introuvable-actions .bouton--plein { background: var(--bleu) !important; color: #fff !important; }
html body .introuvable .bouton--contour { border-color: var(--ciel-2); color: var(--bleu-fonce); background: #fff; }

/* cartes photo posées dans un texte : le résumé reste blanc sur son encadré marine */
.prose .guide-carte--photo p, .guide-carte--photo p { color: #fff; font-size: .82rem; line-height: 1.62; margin: 0; }
.prose .guide-carte--photo h2, .prose .guide-carte--photo h3 { margin: 0 0 .55rem; max-width: none; }
.prose .guide-carte--photo h2::before { display: none; }
.guides-grille:has(> .guide-carte--photo) { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.prose .guides-grille { margin: 1.4rem 0 1rem; }
.prose a.guide-carte { border-bottom: 0; }

/* ==========================================================================
   FINITIONS RÉFÉRENCEMENT ET ACCESSIBILITÉ (03/10/2026, revue des 216 points)
   ST-18 contrastes : le bleu de la DA (#4F7CFF) ne porte jamais de petit texte
   blanc (3,7:1). Petit texte sur bleu -> #3661E0 (5,3:1) ; grandes bandes bleues
   -> #3B68EE (4,8:1). Le #4F7CFF reste pour les titres encadrés (grand texte,
   3:1 suffit), les icônes, les bordures et les décors.
   TK-16 LCP : la photo principale n'apparaît plus en fondu (mouvement seul).
   IA-18 / TK-32 : le sommaire n'est plus masqué sur téléphone.
   ========================================================================== */
:root { --bleu-section: #3B68EE; }
.manifeste, .offre, .parcours, .contact, .appel, .bandeau { background-color: var(--bleu-section); }
.sur, .hero-sur, .etape-nb, .langue-active, .badge, .parcours-nb, .fondateur-role,
.guide-carte--photo .realisation-lien, .carte-h3 h3::before, .prose .numerotee li::before { background: var(--bleu-fonce); }
.sur--clair, .prose .sur--clair { background: #fff; color: var(--bleu-fonce); }
.sur--puces { background: var(--marine); }
html body .badge--estime { background: #fff; color: var(--bleu-fonce); }
.bouton--plein, .hero .bouton--plein, .bouton--nav, .nav:not(.nav--solide):not(.menu-ouvert) .bouton--nav,
html body .simu .res-actions .bouton--plein, .introuvable-actions .bouton--plein { background: var(--bleu-fonce); }
.bouton--plein:hover, .hero .bouton--plein:hover, .bouton--nav:hover { background: #2A50C8; }
.bulle--ia { background: var(--bleu-fonce); }
.bulle--patient .bulle-qui { color: #5A6380; }
.souligne { background: var(--bleu-fonce); }
html body .simu .pastilles button[aria-pressed="true"] { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
html body .simu .phrase { background: var(--bleu-fonce); }
.dec-visuel--icone { background-color: var(--bleu-fonce); }

/* la photo principale arrive sans fondu : elle compte dès le premier affichage. Les deux boutons
   aussi (03/10/2026) : à mi-fondu, leur bleu pâlit sous le contraste minimal (Lighthouse en ligne : 4,1:1). */
html.reveal-actif .hero-visuel[data-hero], html.reveal-actif .hero-actions[data-hero] { animation-name: hero-monte-visible; }
@keyframes ph-entre { from { transform: translateY(22px) scale(.98); } to { transform: none; } }

/* le sommaire reste visible sur téléphone et tablette, en tête du texte */
@media (max-width: 1099px) {
  .corps-grille { display: flex; flex-direction: column; }
  .corps-grille > .prose { order: 2; }
  .sommaire { display: block; order: 1; position: static; margin: 0 0 2.4rem; background: var(--ciel); border-radius: 20px; padding: 1.1rem 1.2rem 1.15rem .4rem; }
  .sommaire::before { width: 38px; height: 38px; margin: 0 0 .6rem 1rem; }
  .sommaire ol { border-left-color: var(--ciel-2); }
  .sommaire a { font-size: .92rem; padding-top: .5rem; padding-bottom: .5rem; }
}
.bulle--ia .bulle-qui { color: #fff; }
html body .badge { background: var(--bleu-fonce); }
html body .badge--estime { background: #fff; color: var(--bleu-fonce); }

/* TK-16 (03/10/2026) : le texte d'en-tête des pages intérieures n'est jamais caché au premier affichage
   (c'est lui que Google mesure) : il monte sans fondu, comme le titre de l'accueil. */
@keyframes bloc-entre { from { transform: translateY(18px); } to { transform: none; } }

/* ==========================================================================
   TÉLÉPHONE (03/10/2026, retour : « optimise et rends plus lisible la version
   téléphone »). Moins de défilement (l'accueil faisait 27 écrans), titres sur
   moins de lignes, lecture alignée à gauche, cartes qu'on fait glisser au doigt
   au lieu d'un ruban qui bouge, bulle WhatsApp qui ne cache plus le texte.
   ========================================================================== */
@media (max-width: 699px) {
  :root { --section: clamp(3.1rem, 12vw, 4rem); }
  .page-corps, .article, .blog-accueil { padding-top: 2.8rem; padding-bottom: 2.8rem; }

  /* titres : plus compacts, deux à trois lignes au lieu de quatre ou cinq */
  .titre { font-size: clamp(1.62rem, 7.1vw, 1.92rem); line-height: 1.14; margin-bottom: .85rem; }
  .hero-titre { font-size: clamp(2.05rem, 9.3vw, 2.35rem); line-height: 1.08; }
  .ph-texte .titre { font-size: clamp(1.75rem, 8vw, 2.05rem); }
  .manifeste-texte { font-size: clamp(1.4rem, 6.2vw, 1.6rem); line-height: 1.22; }
  .prose h2 { font-size: clamp(1.38rem, 6.2vw, 1.55rem); margin-top: 2.6rem; }
  .prose h2[data-ico]::before { width: 50px; height: 50px; background-size: 34px; border-radius: 16px; margin-bottom: .8rem; }
  .sur, .hero-sur { margin-bottom: .9rem; }
  .hero-sur { font-size: .62rem; letter-spacing: .06em; }

  /* lecture alignée à gauche (un paragraphe centré se lit mal sur un téléphone) */
  .texte--centre, .realisations-note { text-align: left; margin-inline: 0; }
  .offre .sur, .offre .titre, .parcours .sur, .parcours .titre,
  .realisations > .int:first-child > .sur, .realisations > .int:first-child > .titre { text-align: left; margin-inline: 0; }
  .realisations-note { margin-top: 1.4rem; }

  /* ouverture : la photo moins haute, la bulle de l'IA mieux posée */
  .hero { padding-bottom: 3.2rem; }
  .hero-actions { margin-top: 1.3rem; gap: .65rem; }
  .hero-visuel { margin-top: .4rem; padding-bottom: 9.5rem; }
  .hero-photo { aspect-ratio: 1 / 1; width: 80%; }
  .hero-photo img { object-position: 50% 16%; }
  .hero-sourire { width: 36%; top: 6%; }
  .hero-ico--dent { width: 70px; right: 0; top: -14px; }
  .hero-ico--etoile { width: 54px; right: 2%; bottom: 36%; }

  /* en-tête des pages intérieures : une bande photo au lieu d'un écran entier */
  .page-hero--visuel { padding-top: calc(64px + 1.1rem); padding-bottom: 3rem; }
  .ph-grille { gap: 1.7rem; }
  .ph-visuel { justify-self: stretch; max-width: none; padding: 0 0 1.3rem 1.3rem; }
  .ph-photo { aspect-ratio: 16 / 11; border-radius: 24px; }
  .ph-photo img { object-position: 50% 24%; }
  .ph-mini { width: 30%; border-width: 4px; border-radius: 16px; }
  .ph-ico--1 { width: 62px; right: -2px; top: -18px; }
  .ph-ico--2 { width: 46px; right: 8%; bottom: 0; }
  .prose-photo { aspect-ratio: 16 / 10; margin-top: 2.2rem; border-radius: 20px; }

  /* le ruban de cartes : il avance doucement tout seul, en boucle, et se prend au doigt
     (script.js) ; pas d'accroche carte par carte, elle bloquerait l'avance douce */
  [data-carrousel][data-tel] .carrousel-piste {
    -webkit-mask-image: none; mask-image: none; cursor: auto;
    margin-right: -1.25rem; padding-right: 1.25rem; padding-bottom: 16px;
  }
  [data-carrousel][data-tel] .carrousel-piste > * { flex: 0 0 84%; margin-right: .8rem; }
  [data-tel] .carrousel-barre { display: none; }
  .offre .carrousel, .realisations .carrousel { margin-top: 1.6rem; }

  /* articles : une rangée qui défile comme le ruban, au lieu de quatre grandes cartes empilées */
  .page-blog .guides-grille, .blog-accueil .guides-grille {
    display: flex; overflow-x: auto; gap: .8rem;
    margin-right: -1.25rem; padding: 0 1.25rem 14px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .page-blog .guides-grille::-webkit-scrollbar, .blog-accueil .guides-grille::-webkit-scrollbar { display: none; }
  .page-blog .guide-carte--photo, .blog-accueil .guide-carte--photo { flex: 0 0 84%; min-height: 410px; }

  /* l'équipe : deux fiches compactes (photo, prénom et rôle sur une ligne, puis le texte) */
  .equipe-grille { gap: 2rem; }
  .equipe .fondateur { display: grid; grid-template-columns: 92px 1fr; column-gap: 1rem; row-gap: .3rem; align-items: center; }
  .equipe .fondateur-photo { grid-row: 1 / span 2; width: 92px; max-width: none; height: 112px; min-height: 0; border-radius: 18px; position: static; }
  .equipe .fondateur-photo img { position: static; width: 100%; height: 100%; aspect-ratio: auto; object-position: 50% 15%; }
  .equipe .fondateur-texte { display: contents; }
  .equipe .fondateur h3 { grid-column: 2; align-self: end; font-size: 1.4rem; }
  .equipe .fondateur-role { grid-column: 2; align-self: start; margin: 0; }
  .equipe .fondateur-texte p:last-child { grid-column: 1 / -1; margin-top: .8rem; }

  /* photos moins hautes dans les parties qui s'empilent */
  .contact-image img { aspect-ratio: 16 / 11; }
  .histoire-photo { aspect-ratio: 16 / 10; }
  .parcours-photo { aspect-ratio: 16 / 9; }
  .carte-photo { aspect-ratio: 16 / 9; }

  /* bulle WhatsApp plus petite, collée au coin : elle ne cache plus la fin des lignes */
  .wa { right: .7rem; bottom: .7rem; padding: .55rem; border-width: 2px; box-shadow: 0 8px 20px -10px rgba(20, 35, 94, .55); }
  .wa svg { width: 20px; height: 20px; }
  .pied { padding-bottom: 5rem; }
  .pied-int--4 { gap: 1.8rem; }
}

/* Téléphone, deuxième passe (03/10/2026) : rien ne dépasse, rien de trop petit.
   - les grands boutons tenaient sur une ligne forcée et poussaient le bandeau bleu
     plus large que l'écran (le paragraphe au-dessus était coupé à droite) ;
   - étiquettes en capitales sous 11 px, montées d'un cran ;
   - liens du pied de page, fil d'Ariane, FR/EN et « Comprendre ce critère » :
     des zones à toucher plus hautes, sans changer ce qu'on voit ;
   - l'encadré « à retenir » : l'ampoule au-dessus, le texte sur toute la largeur. */
@media (max-width: 699px) {
  .bouton { white-space: normal; max-width: 100%; text-align: center; line-height: 1.3; }
  .bouton--grand { padding: 1rem 1.35rem; font-size: clamp(.98rem, 4.2vw, 1.05rem); }

  .sur { font-size: .72rem; }
  .hero-sur { font-size: .7rem; line-height: 1.4; letter-spacing: .05em; }
  .guide-carte--photo .sur { font-size: .66rem; }
  .prose .sur, .page-corps .sur, .rs-demo-mot .sur, .prose p.sur, .guide-carte .sur { font-size: .7rem; }
  .bulle-qui { font-size: .7rem; }
  .realisation-type { font-size: .7rem; }

  .langues > * { padding: .5rem .62rem; }
  .fil a { display: inline-block; padding: .55rem 0; margin: -.55rem 0; }
  .pied-liens, .pied-contact { gap: .1rem; }
  .pied-liens a, .pied-contact a { min-height: 38px; }
  .carte-lien { padding-block: .5rem; margin-top: .4rem; }
  .aide summary { padding-block: .6rem; }

  .prose .encart { padding: 1.25rem 1.2rem 1.3rem; }
  .prose .encart::before { position: static; display: block; width: 46px; height: 46px; margin-bottom: .55rem; }
}

/* Téléphone (03/10/2026, retour : « ça saccade ») : les rangées glissent d'un bloc dans un rail
   (script.js, rubanTelephone), au centième de pixel. Le doigt est suivi par le script. */
@media (max-width: 699px) {
  [data-glisse] .carrousel-piste, .guides-grille[data-glisse] { overflow: hidden; touch-action: pan-y; }
  .carrousel-rail { display: flex; width: 100%; will-change: translate; }
  .carrousel[data-glisse] .carrousel-piste > .carrousel-rail, .guides-grille[data-glisse] > .carrousel-rail { flex: 0 0 100%; margin: 0; }
  [data-glisse] .carrousel-rail > * { flex: 0 0 84%; margin-right: .8rem; }
  .guides-grille[data-glisse] .carrousel-rail { gap: .8rem; }
  .guides-grille[data-glisse] .carrousel-rail > * { margin-right: 0; }
  /* (04/10/2026, retour : « une barre bleue à gauche ») : la rangée s'arrêtait à la marge
     gauche de la page, les cartes disparaissaient 20 px avant le bord de l'écran.
     Elle va désormais d'un bord à l'autre, la première carte reste alignée sur le texte. */
  [data-carrousel][data-tel] .carrousel-piste, .page-blog .guides-grille, .blog-accueil .guides-grille {
    margin-left: -1.25rem; padding-left: 1.25rem;
  }
}

/* ---------- Ouverture, logo vivant (03/10/2026, retour : « le logo plus gros, une vraie
   animation, plus vivant » ; l'ancien rond était coupé : son contour dépassait du dessin).
   0,1 s : le disque bleu gonfle, l'anneau blanc se trace ; 0,55 s : le D monte ;
   1 s : le sourire se dessine ; 1,35 s : le logo sautille, sourit plus grand, des ondes
   et trois étincelles partent ; le nom s'écrit ; 2,1 s : tout s'envole, le rideau s'ouvre. */
html.intro-joue .intro-centre { width: 360px; height: 440px; margin: -220px 0 0 -180px; gap: .9rem; animation: intro-sortie .5s cubic-bezier(.4, 0, 1, 1) 2.1s both; }
html.intro-joue .intro-haut, html.intro-joue .intro-bas { animation-delay: 2.2s; }
html.intro-joue [data-hero] { animation-delay: calc(2.3s + var(--i, 0) * .14s); }
html.intro-joue .intro-halo { animation: intro-halo-pouls 2.1s ease-out .05s both; }
@keyframes intro-halo-pouls { 0% { opacity: 0; transform: scale(.3); } 45% { opacity: 1; transform: scale(1); } 70% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1.04); } }
.intro-saut { position: relative; width: 250px; height: 250px; }
html.intro-joue .intro-saut { animation: intro-sautille .62s cubic-bezier(.3, .7, .3, 1) 1.35s both; transform-origin: 50% 100%; }
@keyframes intro-sautille {
  0% { transform: none; } 22% { transform: scale(1.07, .92); } 50% { transform: translateY(-18px) scale(.96, 1.05); }
  78% { transform: translateY(0) scale(1.04, .97); } 100% { transform: none; }
}
html.intro-joue .intro-logo { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 30px rgba(20, 35, 94, .42)); animation: none; }
.intro-logo circle { stroke: none; }
.intro-logo .intro-anneau { stroke: #fff; stroke-width: 8; }
.intro-disque, .intro-d, .intro-trait, .intro-anneau { transform-box: fill-box; transform-origin: 50% 50%; }
html.intro-joue .intro-disque { animation: intro-gonfle .7s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
@keyframes intro-gonfle { from { transform: scale(0); } to { transform: scale(1); } }
html.intro-joue .intro-anneau { stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); animation: intro-anneau .85s cubic-bezier(.65, 0, .35, 1) .2s both; }
@keyframes intro-anneau { to { stroke-dashoffset: 0; } }
html.intro-joue .intro-d { animation: intro-d .55s cubic-bezier(.34, 1.56, .64, 1) .55s both; }
@keyframes intro-d { from { opacity: 0; transform: translateY(26px) scale(.55); } to { opacity: 1; transform: none; } }
html.intro-joue .intro-trait { stroke-dasharray: 100; stroke-dashoffset: 100; animation: intro-trait .4s cubic-bezier(.4, 0, .2, 1) 1s both, intro-sourit .6s cubic-bezier(.34, 1.56, .64, 1) 1.4s both; }
@keyframes intro-sourit { 0% { transform: none; } 45% { transform: scale(1.28, 1.35) translateY(2px); } 100% { transform: scale(1.12, 1.15); } }
.intro-onde { position: absolute; inset: 7%; border: 2px solid rgba(255, 255, 255, .7); border-radius: 50%; opacity: 0; }
html.intro-joue .intro-onde--1 { animation: intro-onde 1s cubic-bezier(.2, .6, .3, 1) 1.4s both; }
html.intro-joue .intro-onde--2 { animation: intro-onde 1s cubic-bezier(.2, .6, .3, 1) 1.62s both; }
@keyframes intro-onde { 0% { opacity: 0; transform: scale(.7); } 4% { opacity: .8; transform: scale(.74); } 100% { opacity: 0; transform: scale(2.1); } }
.intro-etincelle { position: absolute; width: 26px; height: 26px; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0; }
.intro-etincelle--1 { right: 2%; top: 3%; width: 30px; height: 30px; }
.intro-etincelle--2 { right: -9%; top: 26%; width: 18px; height: 18px; }
.intro-etincelle--3 { left: -2%; top: 10%; width: 20px; height: 20px; }
html.intro-joue .intro-etincelle--1 { animation: intro-etincelle .7s ease-out 1.45s both; }
html.intro-joue .intro-etincelle--2 { animation: intro-etincelle .7s ease-out 1.58s both; }
html.intro-joue .intro-etincelle--3 { animation: intro-etincelle .7s ease-out 1.7s both; }
@keyframes intro-etincelle { 0% { opacity: 0; transform: scale(0) rotate(0); } 40% { opacity: 1; transform: scale(1.15) rotate(45deg); } 100% { opacity: 0; transform: scale(.4) rotate(110deg); } }
html.intro-joue .intro-nom { font-size: 2.7rem; }
html.intro-joue .intro-nom span { animation-delay: calc(1.05s + var(--l) * .045s); }
html.intro-joue .intro-ligne { animation-delay: 1.55s; }
@media (max-width: 600px) {
  html.intro-joue .intro-centre { width: 320px; height: 400px; margin: -200px 0 0 -160px; }
  .intro-saut { width: 216px; height: 216px; }
  html.intro-joue .intro-nom { font-size: 2.3rem; }
}
@media (prefers-reduced-motion: reduce) { #intro { display: none !important; } }

/* Ouverture sur iPhone (03/10/2026, retour : « on voit une forme carrée ») : Safari peint un
   logo qui bouge dans un calque carré ; l'ombre (filter: drop-shadow) et le flou du halo
   (filter: blur) y sont calculés avec une teinte à peine différente du fond, et le carré
   se devine quand les couleurs changent autour. Plus aucun filtre : l'ombre est portée par
   un vrai disque rond qui gonfle avec le logo, le halo reste un dégradé doux. */
html.intro-joue .intro-halo { filter: none; }
html.intro-joue .intro-logo { filter: none; position: relative; }
.intro-saut::before {
  content: ""; position: absolute; inset: 6.9%; border-radius: 50%;
  box-shadow: 0 18px 34px -6px rgba(20, 35, 94, .45);
}
html.intro-joue .intro-saut::before { animation: intro-gonfle .7s cubic-bezier(.34, 1.56, .64, 1) .1s both; }

/* ==========================================================================
   LINKEDIN EN AVANT (04/10/2026, retour : « on va beaucoup publier », un post par jour).
   Posé par outils/da/reseaux-linkedin.py : boutons nommés dans le pied et le contact,
   entrée du menu « Ressources », bande « Un conseil par jour » avant l'appel final.
   Bleu LinkedIn #0A66C2 seulement sur ce qui mène à LinkedIn (texte blanc : 5,7:1).
   ========================================================================== */
.pied-social--noms a {
  width: auto; height: auto; min-height: 42px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.05rem .5rem .8rem;
  font-size: .92rem; font-weight: 700; color: #fff; text-decoration: none;
}
.pied-social--noms a svg { width: 18px; height: 18px; flex: none; }
.pied-social.pied-social--noms .s-li { background: #0A66C2; border-color: #0A66C2; }
.pied-social.pied-social--noms .s-li:hover, .pied-social.pied-social--noms .s-li:focus-visible { background: #004182; }
.contact .pied-social.pied-social--noms .s-li { background: #fff; border-color: #fff; color: #0A66C2; }
.contact .pied-social.pied-social--noms .s-li:hover, .contact .pied-social.pied-social--noms .s-li:focus-visible { background: var(--ciel); color: #004182; }

/* le menu : la page LinkedIn, avec son logo */
.nav-p--li .nav-p-nom { display: inline-flex; align-items: center; gap: .45rem; }
.nav-p--li .nav-p-nom::before {
  content: "in"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px;
  background: #0A66C2; color: #fff; font: 800 .72rem/1 Arial, sans-serif; letter-spacing: -.02em;
}

/* la bande : texte et bouton à gauche, la carte de la page à droite */
.li-bande { padding: var(--section, 6rem) 0; background: #fff; border-top: 1px solid var(--ligne); }
.li-bande--accueil { border-top: 0; background: linear-gradient(180deg, #fff 0%, var(--ciel) 100%); }   /* du blanc du blog au bleu ciel des questions */
.li-int { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.li-texte .texte { max-width: 34rem; }
.li-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.7rem; }
.bouton--li { display: inline-flex; align-items: center; gap: .65rem; }
.bouton--li svg { width: 20px; height: 20px; flex: none; }
.li-bande .bouton--li, .li-bande .bouton--li:hover { background: #0A66C2; box-shadow: 0 18px 34px -16px rgba(10, 102, 194, .75); }
.li-bande .bouton--li:hover { background: #004182; }
.li-ig { font-weight: 700; color: var(--bleu-texte); text-decoration: none; }
.li-ig:hover { text-decoration: underline; }

.li-carte {
  display: block; justify-self: end; width: 100%; max-width: 430px; overflow: hidden;
  background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); border: 1px solid var(--ligne);
  color: var(--marine); text-decoration: none; transition: transform .35s var(--courbe, ease), box-shadow .35s;
}
.li-carte:hover, .li-carte:focus-visible { transform: translateY(-4px); box-shadow: 0 38px 70px -36px rgba(20, 35, 94, .55); }
.li-carte-bandeau { position: relative; display: block; height: 118px; background: var(--vagues-bleu) center / cover no-repeat, var(--degrade); }
.li-carte-in { position: absolute; left: 1rem; top: 1rem; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: #0A66C2; }
.li-carte-in svg { width: 20px; height: 20px; }
.li-carte-photo { position: absolute; top: 16px; width: 64px; height: 80px; object-fit: cover; object-position: 50% 22%; border: 3px solid #fff; border-radius: 12px; box-shadow: 0 10px 20px -10px rgba(20, 35, 94, .6); }
.li-carte-photo--1 { right: 92px; transform: rotate(-5deg); }
.li-carte-photo--2 { right: 22px; top: 20px; transform: rotate(4deg); }
.li-carte-corps { position: relative; display: block; padding: 0 1.6rem 1.6rem; }   /* au-dessus du bandeau : le logo le chevauche */
.li-carte-logo { display: block; width: 84px; height: 84px; margin-top: -42px; border-radius: 22px; border: 4px solid #fff; background: #fff; box-shadow: 0 12px 26px -14px rgba(20, 35, 94, .5); }
.li-carte-nom { display: block; margin-top: .8rem; font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; }
.li-carte-sous { display: block; margin-top: .25rem; color: var(--doux); line-height: 1.45; }
.li-carte-meta { display: block; margin-top: .55rem; color: var(--doux); font-size: .88rem; }
.li-carte-suivre { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.2rem; padding: .55rem 1.3rem; border-radius: 999px; background: #0A66C2; color: #fff; font-weight: 700; }

/* sur l'accueil, une partie = un écran comme les autres (bloc ÉCRANS) */
@media (min-width: 960px) {
  .li-bande--accueil { min-height: var(--ecran); display: flex; flex-direction: column; justify-content: center; padding-block: var(--section); }
  .li-bande--accueil .li-carte { max-width: 460px; }
}
@media (max-width: 860px) {
  .li-int { grid-template-columns: 1fr; }
  .li-carte { justify-self: stretch; max-width: none; }
}
@media (max-width: 699px) {
  .li-bande { padding: 3.2rem 0; }
  .li-actions { flex-direction: column; align-items: stretch; gap: .9rem; }
  .bouton--li { justify-content: center; }
  .li-ig { align-self: center; }
  .li-carte { display: none; }   /* sur téléphone, le bouton suffit : la carte allongeait la page d'un écran */
}

/* Tableau à deux colonnes empilé sur téléphone (04/10/2026, page de l'assistant téléphonique) :
   chaque ligne devient un bloc, la question au-dessus de la réponse, sans défilement de côté. */
@media (max-width: 700px) {
  .tableau--empile { min-width: 0; }
  .tableau--empile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tableau--empile, .tableau--empile tbody, .tableau--empile tr, .tableau--empile td { display: block; width: 100%; }
  .tableau--empile tr { padding: .85rem 1rem; border-bottom: 1px solid var(--ciel-2); }
  .tableau--empile tr:last-child { border-bottom: 0; }
  .tableau--empile td { padding: 0; border: 0; }
  .tableau--empile td + td { margin-top: .35rem; }
}

/* Menu « Services supplémentaires » (04/10/2026) : les services en construction sont affichés sans lien,
   avec une étiquette « En construction » sous le nom, à la place du sous-titre (elle est dans le nom :
   visible aussi dans le menu du téléphone, où les sous-titres sont masqués). Couleurs au-dessus de 4,5:1 sur blanc. */
.nav-panneau .nav-p--bientot { cursor: default; }
.nav-panneau .nav-p--bientot:hover { background: none; }
.nav-p--bientot .nav-p-nom { color: #5B6488; font-weight: 600; }
.nav-p-etiquette {
  display: table; margin-top: .3rem; padding: .18rem .5rem; border-radius: 999px;   /* sous le nom, à la place du sous-titre */
  background: #FFF1D6; color: #7A4A00; font-size: .66rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; white-space: nowrap;
}
.nav-liens.ouvert .nav-p--bientot .nav-p-nom { font-weight: 500; }

/* le menu Ressources : Instagram (3e) avant LinkedIn (4e), chacun avec son logo */
.nav-p--ig .nav-p-nom { display: inline-flex; align-items: center; gap: .45rem; }
.nav-p--ig .nav-p-nom::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' rx='4.6' fill='none' stroke='white' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='3.6' fill='none' stroke='white' stroke-width='2.2'/%3E%3Ccircle cx='16.6' cy='7.4' r='1.2' fill='white'/%3E%3C/svg%3E") center / 15px no-repeat,
              radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 92%);
}

/* Sept entrées dans la barre depuis « Services supplémentaires » : un peu moins d'espace entre elles
   pour tenir dans les 1 180 px de la page, logo et sélecteur de langue compris (mesuré à 1 220 et 1 440 px). */
@media (min-width: 1220px) {
  .nav-liens { gap: 1rem; font-size: .92rem; }
  .langues { margin-left: .9rem; }
}

/* ==========================================================================
   INSTAGRAM EN PREMIER (04/10/2026 au soir, retour : « en réalité on est plus actif sur Instagram »).
   La bande avant l'appel final (.li-bande--ig) et le premier bouton du pied mènent à Instagram ;
   LinkedIn reste à côté, en second, sans couleur propre. Dégradé #C13584 → #833AB4 : texte blanc
   à 5,1:1 au plus clair, et #C13584 sur blanc à 5,1:1.
   ========================================================================== */
.pied-social.pied-social--noms .s-ig { background: linear-gradient(90deg, #C13584, #833AB4); border-color: transparent; color: #fff; }
.pied-social.pied-social--noms .s-ig:hover, .pied-social.pied-social--noms .s-ig:focus-visible { background: linear-gradient(90deg, #A52C70, #6E2F99); }
.pied-social.pied-social--noms .s-li { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: #fff; }
.pied-social.pied-social--noms .s-li:hover, .pied-social.pied-social--noms .s-li:focus-visible { background: #0A66C2; }
.contact .pied-social.pied-social--noms .s-ig { background: #fff; border-color: #fff; color: #C13584; }
.contact .pied-social.pied-social--noms .s-ig:hover, .contact .pied-social.pied-social--noms .s-ig:focus-visible { background: var(--ciel); color: #A52C70; }
.contact .pied-social.pied-social--noms .s-li { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }
.contact .pied-social.pied-social--noms .s-li:hover, .contact .pied-social.pied-social--noms .s-li:focus-visible { background: rgba(255, 255, 255, .28); color: #fff; }
.li-bande--ig .bouton--li, .li-bande--ig .bouton--li:hover { background: linear-gradient(90deg, #C13584, #833AB4); box-shadow: 0 18px 34px -16px rgba(193, 53, 132, .7); }
.li-bande--ig .bouton--li:hover { background: linear-gradient(90deg, #A52C70, #6E2F99); }
.li-bande--ig .li-carte-in { color: #C13584; }
.li-bande--ig .li-carte-suivre { background: linear-gradient(90deg, #C13584, #833AB4); }

/* ==========================================================================
   APPELS À L'ACTION (04/10/2026, retour : « donner vraiment envie de cliquer sans en faire trop, un côté plus premium »).
   Bleu en léger dégradé, reflet en haut, ombre colorée douce, flèche dans une pastille qui glisse au survol ;
   les garanties dessous rassurent. Texte blanc sur #3D6AE8 au plus clair : 4,8:1.
   ========================================================================== */
a.bouton.bouton--cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  padding: .95rem .95rem .95rem 1.55rem; border-radius: 999px;
  background: linear-gradient(180deg, #3D6AE8 0%, #2F57D6 100%); color: #fff;
  font-weight: 700; letter-spacing: -.01em; text-decoration: none; border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(20, 35, 94, .18), 0 16px 32px -16px rgba(47, 87, 214, .7);
  transition: transform .25s var(--courbe, ease), box-shadow .25s, background .25s;
}
a.bouton.bouton--cta:hover, a.bouton.bouton--cta:focus-visible {
  transform: translateY(-2px); background: linear-gradient(180deg, #3460E0 0%, #284CC2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 4px rgba(20, 35, 94, .18), 0 22px 40px -16px rgba(47, 87, 214, .8);
}
.cta-fleche {
  display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(255, 255, 255, .2); font-size: 1rem; line-height: 1; transition: transform .25s var(--courbe, ease), background .25s;
}
a.bouton.bouton--cta:hover .cta-fleche, a.bouton.bouton--cta:focus-visible .cta-fleche { transform: translateX(3px); background: rgba(255, 255, 255, .28); }
.cta-garanties { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .9rem 0 0; font-size: .86rem; font-weight: 600; color: var(--doux); }
.cta-garanties span { display: inline-flex; align-items: center; gap: .35rem; }
.cta-garanties span::before { content: "✓"; color: #2F57D6; font-weight: 800; }
.ph-actions { margin-top: 1.7rem; }
.cta-carte {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .9rem 2rem;
  margin: 2.6rem 0; padding: 1.6rem 1.8rem; border-radius: 22px;
  background: #fff; border: 1px solid var(--ciel-2);
  box-shadow: 0 1px 2px rgba(20, 35, 94, .06), 0 24px 48px -30px rgba(20, 35, 94, .35);   /* blanche : se distingue des encadrés bleu clair */
}
.cta-carte-titre { margin: 0; font-size: 1.22rem; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; color: var(--marine); }
.cta-carte .cta-garanties { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) {
  .cta-carte { grid-template-columns: 1fr; padding: 1.35rem 1.25rem; }
  a.bouton.bouton--cta { width: 100%; white-space: normal; text-align: left; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  a.bouton.bouton--cta, .cta-fleche { transition: none; }
  a.bouton.bouton--cta:hover, a.bouton.bouton--cta:hover .cta-fleche { transform: none; }
}

/* Le compte Instagram montré dans un téléphone, avec deux visages souriants autour (04/10/2026 au soir :
   « une image comme si on montrait le compte Insta, quelque chose de plus joli, avec des images d'humains à côté »). */
.ig-visuel { position: relative; justify-self: center; display: block; width: min(100%, 470px); padding: 1.2rem 4.2rem 1.6rem; color: var(--marine); text-decoration: none; }
.ig-tel {
  position: relative; z-index: 1; display: block; width: 100%; max-width: 310px; margin: 0 auto; padding: 11px;
  border-radius: 40px; background: #121B3F;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 44px 80px -34px rgba(20, 35, 94, .6);
  transition: transform .4s var(--courbe, ease);
}
.ig-tel::before { content: ""; position: absolute; z-index: 2; top: 17px; left: 50%; width: 78px; height: 20px; border-radius: 12px; background: #121B3F; transform: translateX(-50%); }
.ig-tete { display: flex; align-items: center; gap: .55rem; padding: 40px 12px 12px; border-radius: 30px 30px 0 0; background: #fff; }
.ig-logo { width: 40px; height: 40px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #D6249F; }
.ig-id { display: grid; min-width: 0; line-height: 1.2; }
.ig-id b { font-size: .86rem; font-weight: 800; letter-spacing: -.01em; }
.ig-id small { overflow: hidden; font-size: .68rem; color: var(--doux); white-space: nowrap; text-overflow: ellipsis; }
.ig-suivre { margin-left: auto; flex: none; padding: .38rem .8rem; border-radius: 9px; background: linear-gradient(90deg, #C13584, #833AB4); color: #fff; font-size: .74rem; font-weight: 700; }
.ig-grille { display: block; width: 100%; height: auto; border-radius: 0 0 30px 30px; background: #fff; }
.ig-photo {
  position: absolute; z-index: 2; width: 118px; height: 146px; object-fit: cover; object-position: 50% 22%;
  border: 5px solid #fff; border-radius: 22px; box-shadow: 0 22px 40px -20px rgba(20, 35, 94, .55);
  transition: transform .4s var(--courbe, ease);
}
.ig-photo--1 { left: 0; top: 16%; transform: rotate(-6deg); }
.ig-photo--2 { right: 0; bottom: 12%; transform: rotate(5deg); }
.ig-coeur {
  position: absolute; z-index: 3; right: 10%; top: 4%; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; background: linear-gradient(135deg, #F56040, #C13584 55%, #833AB4); color: #fff;
  box-shadow: 0 16px 30px -12px rgba(193, 53, 132, .7);
}
.ig-coeur svg { width: 22px; height: 22px; }
.ig-visuel:hover .ig-tel, .ig-visuel:focus-visible .ig-tel { transform: translateY(-6px); }
.ig-visuel:hover .ig-photo--1 { transform: rotate(-8deg) translateY(-4px); }
.ig-visuel:hover .ig-photo--2 { transform: rotate(7deg) translateY(-4px); }
@media (max-width: 860px) { .ig-visuel { justify-self: center; } }
@media (max-width: 699px) { .ig-visuel { display: none; } }   /* sur téléphone, le bouton suffit (comme l'ancienne carte) */
@media (prefers-reduced-motion: reduce) { .ig-tel, .ig-photo { transition: none; } }