/* Page /a-propos/ (v4.35.0) — même langage que l'accueil refondu façon
   relaisrossar.it : fond blanc, beaucoup d'air, titres en Amithen
   (var(--script), jamais de gras ni de tracking négatif sur une script),
   boutons encre. S'appuie sur les tokens de vitrine.css. */

.ap-overline{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}
.ap-titre{font-family:var(--script);font-weight:400;font-size:clamp(30px,3.8vw,48px);letter-spacing:0;line-height:1.18;color:var(--ink);margin:8px 0 18px}
.ap-titre--xl{font-size:clamp(46px,6.5vw,84px);margin:12px 0 14px}
.ap-titre--centre{text-align:center}
/* mêmes marges latérales fines que l'accueil (v4.45.0, mesures du modèle) */
.ap-pleine{max-width:1800px;margin:0 auto;padding:0 clamp(20px,2.4vw,44px)}
/* bouton encre du langage accueil (accueil-charte.css n'est pas chargée ici) */
.btn--encre{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--encre:hover{background:transparent;color:var(--ink)}

/* ============ bandeau centré ============ */
.ap-tete{text-align:center;max-width:760px;margin:0 auto;padding:clamp(28px,5vh,56px) 0 clamp(44px,7vh,80px)}
.ap-accroche{font-size:17px;line-height:1.7;color:var(--ink-dim)}

/* ============ présentation — photo portrait + texte ============ */
.ap-presentation{background:#fff;padding-bottom:clamp(70px,10vh,120px)}
.ap-presentation__inner{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,80px);align-items:center}
.ap-presentation__photo{display:block;aspect-ratio:4/5;background-size:cover;background-position:center;border-radius:2px}
.ap-presentation__copy p{font-size:16px;line-height:1.85;color:var(--ink-dim);margin:0 0 18px;max-width:54ch}

/* ============ chiffres clés — entre deux filets ============ */
.ap-chiffres{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(34px,5vh,54px) 0;margin-bottom:clamp(70px,10vh,120px)}
.ap-chiffres__grille{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.ap-chiffre b{display:block;font-family:var(--titres);font-weight:600;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.02em;color:var(--ink)}
.ap-chiffre span{display:block;margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* ============ trio de photos — ligne de base commune, comme l'accueil ============ */
.ap-trio-section{padding-bottom:clamp(70px,10vh,120px)}
.ap-trio{display:grid;grid-template-columns:1.15fr 1fr 1.15fr;column-gap:clamp(18px,2.6vw,48px);align-items:end}
.ap-trio__img{display:block;background-size:cover;background-position:center;border-radius:2px}
.ap-trio__img--1{aspect-ratio:3/4}
.ap-trio__img--2{aspect-ratio:4/5}
.ap-trio__img--3{aspect-ratio:3/4}

/* ============ engagements — trois colonnes ============ */
.ap-engagements{padding-bottom:clamp(70px,10vh,120px)}
.ap-engagements__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);margin-top:clamp(24px,4vh,40px)}
.ap-engagement b{display:block;font-family:var(--titres);font-weight:600;font-size:18px;margin-bottom:8px;color:var(--ink)}
.ap-engagement p{font-size:14.5px;line-height:1.75;color:var(--ink-dim);margin:0}

/* ============ vos interlocuteurs — cartes de visite imprimées (v4.116.0) ============
   Sous « Qui sommes-nous ? ». Trois cartes aux proportions d'une vraie
   carte de visite (85 × 55), papier blanc, ombre portée, logo Océane en
   tête, tranche colorée en pied (turquoise / jaune / turquoise). Alignées
   et droites (l'éventail de biais du premier jet a été retiré à la
   demande du client, v4.117.0) ; au survol la carte monte et passe au
   premier plan. Le survol vit sur .ap-cv__papier ; l'entrée en cascade de
   vitrine-anim.js anime .ap-cv — les deux transforms ne se marchent pas
   dessus. Sur téléphone : empilées. */
.ap-equipe{padding-bottom:clamp(70px,10vh,120px)}
.ap-equipe__texte{font-size:16px;line-height:1.8;color:var(--ink-dim);margin:-6px 0 0;max-width:52ch}
.ap-cvs{list-style:none;margin:clamp(34px,5vh,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px);align-items:stretch}
.ap-cv{position:relative;z-index:1;perspective:1200px}
.ap-cv:hover{z-index:3}
/* Deux faces depuis la v4.130.0 : le recto validé, et un dos qui porte le QR
   de la vCard. Mise en page de base — celle des appareils sans survol : les
   deux faces s'empilent, la carte s'allonge, rien n'est caché. La bascule en
   3D n'arrive que dans la requête @media (hover:hover) plus bas. */
.ap-cv__papier{position:relative;display:flex;flex-direction:column;height:100%;
  background:#fff;border-radius:3px;
  box-shadow:0 1px 1px rgba(20,24,28,.06),0 2px 6px rgba(20,24,28,.06),0 18px 40px -20px rgba(20,24,28,.35);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease}
.ap-cv__face{position:relative;display:flex;flex-direction:column;flex:1 1 auto;background:#fff;border-radius:3px 3px 0 0;
  padding:clamp(24px,2.5vw,32px) clamp(24px,2.5vw,32px) calc(clamp(24px,2.5vw,32px) + 8px)}
/* tranche colorée en pied — comme l'impression d'une vraie carte */
.ap-cv__face::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:var(--accent)}
.ap-cv:nth-child(3n+2) .ap-cv__face::after{background:var(--jaune)}
.ap-cv:hover .ap-cv__papier{box-shadow:0 1px 1px rgba(20,24,28,.06),0 6px 14px rgba(20,24,28,.08),0 40px 70px -24px rgba(20,24,28,.45)}
/* dos : turquoise, le QR de la vCard aussi grand que le papier le permet */
.ap-cv__dos{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:14px;background:var(--accent);border-radius:0 0 3px 3px;text-align:center}
/* une seule ligne, quelle que soit la largeur de la carte : la légende ne
   doit jamais voler la place du QR ni déborder du papier */
.ap-cv__dos-legende{font-size:clamp(9px,.75vw,10.5px);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.4;white-space:nowrap;color:rgba(255,255,255,.92)}
/* logo en tête, comme sur une carte imprimée : le nom garde toute la largeur */
.ap-cv__logo{display:block;align-self:flex-start;width:auto;height:26px;margin:0 0 18px;opacity:.92}
.ap-cv__portrait{position:absolute;top:clamp(24px,2.5vw,32px);right:clamp(24px,2.5vw,32px);width:52px;height:52px;border-radius:50%;background-size:cover;background-position:center}
.ap-cv__nom{display:block;font-family:var(--titres);font-weight:600;font-size:20px;color:var(--ink);line-height:1.3}
.ap-cv__fonction{display:block;margin-top:6px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);line-height:1.5}
.ap-cv__coord{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:16px;font-size:15.5px;color:var(--ink);line-height:1.5}
.ap-cv__coord a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(20,24,28,.25);overflow-wrap:anywhere;transition:text-decoration-color .3s ease}
.ap-cv__coord a:hover{text-decoration-color:var(--accent)}
/* Le QR porte sa propre zone de silence (3 modules blancs dans le SVG), que
   le cadre blanc prolonge. Sa taille n'est pas décorative : mesurée au
   décodeur, une vCard de 53 modules se relit à partir de ~112 px de côté en
   rendu net et il faut ~145 px pour encaisser le flou d'une photo — d'où ce
   plancher. C'est cette place que le recto n'avait pas. */
.ap-cv__qr{display:block;width:clamp(140px,16vw,190px);max-width:100%;background:#fff;border-radius:2px;line-height:0}
.ap-cv__qr-svg{display:block;width:100%;height:auto;shape-rendering:crispEdges}

/* Écrans qui savent survoler : la carte retrouve le format 85 × 55 et se
   retourne pour montrer son dos. Le survol vit sur .ap-cv__papier, l'entrée
   en cascade (vitrine-anim.js) sur .ap-cv : les deux transforms ne se
   marchent pas dessus. */
@media (hover:hover) and (min-width:961px){
.ap-cv__papier{aspect-ratio:85/55;background:transparent;transform-style:preserve-3d;box-shadow:none;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ap-cv__face,.ap-cv__dos{position:absolute;inset:0;border-radius:3px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 1px 1px rgba(20,24,28,.06),0 2px 6px rgba(20,24,28,.06),0 18px 40px -20px rgba(20,24,28,.35);
  transition:box-shadow .55s ease}
.ap-cv__face::after{border-radius:0 0 3px 3px}
.ap-cv__dos{transform:rotateY(180deg)}
/* Carte de hauteur connue (format 85 × 55) : le QR prend toute la hauteur
   que la légende lui laisse, à toute largeur de carte — un module trop
   petit ne se scanne pas, c'est la contrainte qui commande cette mise en
   page. */
.ap-cv__qr{flex:1 1 auto;min-height:0;width:auto;height:auto;aspect-ratio:1}
.ap-cv:hover .ap-cv__papier{transform:translateY(-10px) scale(1.02) rotateY(180deg)}
.ap-cv:hover .ap-cv__face,.ap-cv:hover .ap-cv__dos{box-shadow:0 1px 1px rgba(20,24,28,.06),0 6px 14px rgba(20,24,28,.08),0 40px 70px -24px rgba(20,24,28,.45)}
}
/* Mouvement réduit : la carte se retourne sans animation — supprimer la
   bascule cacherait le QR. Même condition que la bascule elle-même, pour ne
   rien faire tourner là où les faces sont empilées. */
@media (hover:hover) and (min-width:961px) and (prefers-reduced-motion:reduce){
.ap-cv__papier{transition:none}
.ap-cv:hover .ap-cv__papier{transform:rotateY(180deg)}
}
@media (max-width:960px){
.ap-cvs{grid-template-columns:1fr;max-width:460px;padding:0}
.ap-cv__papier{aspect-ratio:auto} /* à la hauteur du contenu, dos compris */
}

/* ============ contact — fond neutre chaud, deux colonnes en B2B ============ */
.ap-contact{background:#f7f6f3;padding:clamp(56px,8vh,90px) 0}
.ap-contact__inner{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:start}
/* sans formulaire (mode B2C), le bloc infos occupe seul une colonne de lecture */
.ap-contact__infos:only-child{max-width:640px;grid-column:1/-1}
.ap-contact__texte{font-size:16px;line-height:1.8;color:var(--ink-dim);margin:0 0 8px;max-width:52ch}
.ap-contact dl{margin:0 0 22px}
.ap-contact dt{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:16px}
.ap-contact dd{margin:3px 0 0;font-size:15.5px;color:var(--ink)}
.ap-contact dd a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ap-contact__form h3{font-family:var(--titres);font-weight:600;font-size:18px;margin:6px 0 14px;color:var(--ink)}

/* FOND UNI (retour client v4.51.0) : mêmes halos radiaux du body annulés
   qu'à l'accueil — voir accueil-charte.css. */
body.oa-agence-page{background:var(--paper)}

/* le footer suit directement le bloc contact */
body.oa-agence-page .oa-footer{margin-top:0}

/* ============ responsive ============ */
@media (max-width:960px){
.ap-presentation__inner{grid-template-columns:1fr}
.ap-presentation__photo{aspect-ratio:4/3}
.ap-chiffres__grille{grid-template-columns:repeat(2,1fr);row-gap:28px}
.ap-engagements__grille{grid-template-columns:1fr}
.ap-cartes{grid-template-columns:1fr 1fr}
.ap-contact__inner{grid-template-columns:1fr}
}
@media (max-width:640px){
.ap-cartes{grid-template-columns:1fr}
}
@media (max-width:760px){
.ap-trio{grid-template-columns:1fr;row-gap:16px}
.ap-trio__img--1,.ap-trio__img--2,.ap-trio__img--3{aspect-ratio:4/3}
}

/* ============ appel au contact — bas de /a-propos/, une colonne centrée ============
   Depuis la v4.114.0 le contact a sa page : il ne reste ici qu'un appel. */
.ap-appel__inner{max-width:660px;margin:0 auto;text-align:center}
.ap-appel__inner .ap-contact__texte{margin:0 auto 24px;max-width:56ch}
.ap-appel__bouton{margin:0}

/* ============ page « Nous contacter » (/nous-contacter/) ============
   Même feuille que /a-propos/ : bandeau sur le papier, bloc neutre
   coordonnées + formulaire, bande photo pour finir. */
body.oa-contact-page{background:var(--paper)}
body.oa-contact-page .oa-footer{margin-top:0}
.oa-contact-page .ap-contact{padding-bottom:clamp(64px,9vh,100px)}
/* Les cartes de visite s'intercalent entre le bandeau et le bloc gris des
   coordonnées (v4.132.0) : le bandeau donne déjà la respiration du haut, et
   le bloc gris amène la sienne — d'où un pied de section resserré ici, sans
   quoi les deux marges s'additionneraient en un grand vide. */
.oa-contact-page .ap-equipe{padding-bottom:clamp(28px,4.5vh,52px)}
/* Pas de photo dans le bloc : la page contact reste au texte et au
   formulaire (demande du 09/09). */