/* =========================================================
   Imea - correctifs issus de l'audit maquette / site
   Charge apres imea.css
   ========================================================= */

/* --- A8 : le contenu ne doit plus ressembler a une carte blanche --- */
.separate-containers .inside-article,
.separate-containers .site-main,
.one-container .site-content{
  background-color:var(--imea-paper) !important;
}
.separate-containers .inside-article{ box-shadow:none; }

/* --- E4 : en-tete collant, le flou deja code sert enfin --- */
.site-header{ position:sticky; top:0; z-index:50; }
body.admin-bar .site-header{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar .site-header{ top:46px; } }
html{ scroll-behavior:smooth; }
.entry-content h2{ scroll-margin-top:110px; }

/* --- A1 : bandes pleine largeur possibles dans un conteneur separe --- */
.entry-content .alignfull{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
  max-width:100vw;
}
.entry-content .alignfull > .wp-block-group__inner-container{
  max-width:1280px; margin:0 auto; padding:0 56px;
}
/* WordPress 6 et suivants n'emettent plus de conteneur interne.
   La bande fait 100vw : une marge interieure de 50% - 584px ramene
   son contenu sur la meme colonne de 1168 px que le reste du site,
   sans casser le flux normal ni la fusion des marges verticales. */
.entry-content .imea-deep,
.entry-content .imea-dark,
.entry-content .imea-band{
  padding-left:max(22px, calc(50% - 584px));
  padding-right:max(22px, calc(50% - 584px));
}
.entry-content .imea-deep > *,
.entry-content .imea-dark > *,
.entry-content .imea-band > *{
  max-width:none;
  margin-left:0;
  margin-right:0;
}
/* le texte garde une longueur de ligne lisible, cale a gauche de la colonne */
.entry-content .imea-deep > p,
.entry-content .imea-deep > ul,
.entry-content .imea-deep > ol,
.entry-content .imea-deep > h2,
.entry-content .imea-band > p,
.entry-content .imea-band > ul,
.entry-content .imea-band > ol,
.entry-content .imea-band > h2{
  max-width:74ch;
}
body{ overflow-x:hidden; }

/* le texte reste lisible dans les colonnes */
.entry-content .wp-block-column > p,
.entry-content .wp-block-column > ul,
.entry-content .wp-block-column > h3{ max-width:none; }

/* --- B2 : alternance de fond entre sections --- */
.entry-content .imea-deep{
  background-color:var(--imea-paper-deep);
  padding-top:80px;
  padding-bottom:80px;
  margin:0;
}
.entry-content .imea-deep > *:first-child,
.entry-content .imea-band > *:first-child{ margin-top:0; }
.entry-content .imea-deep > *:last-child,
.entry-content .imea-band > *:last-child{ margin-bottom:0; }
.entry-content .imea-deep h2{ margin-top:0; }

/* bande sur fond papier, pour l'alternance avec imea-deep */
.entry-content .imea-band{
  background-color:var(--imea-paper);
  padding-top:80px;
  padding-bottom:80px;
  margin:0;
}
.entry-content .imea-band h2{ margin-top:0; }

/* image de colonne au format portrait, pour equilibrer texte et photo */
.entry-content .imea-45 img{ aspect-ratio:4/5; object-fit:cover; }
.entry-content .imea-45{ margin:0; }
@media (max-width:768px){
  .entry-content .imea-45 img{ aspect-ratio:3/2; }
  .entry-content .imea-11 img{ aspect-ratio:4/3; }
}

/* cadrage cale vers le haut : pour les photos tres verticales dont le sujet
   est en haut du cadre, le recadrage centre couperait la tete. */
.entry-content .imea-cadrage-haut img{ object-position:center 12% !important; }

/* --- B3 : bande finale sur fond encre --- */
.entry-content .imea-dark{
  background-color:var(--imea-ink);
  color:var(--imea-paper);
  padding-top:76px;
  padding-bottom:76px;
  text-align:center;
  margin:0;
}
.entry-content .imea-dark > *:first-child{ margin-top:0; }
.entry-content .imea-dark > *:last-child{ margin-bottom:0; }
.entry-content .imea-dark h2{ color:var(--imea-paper); margin-top:0; }
.entry-content .imea-dark p{
  color:#c8bfb5;
  max-width:62ch;
  margin-left:auto;
  margin-right:auto;
}
.entry-content .imea-dark p.kicker{ color:var(--imea-accent); }
.entry-content .imea-dark .wp-block-buttons{ justify-content:center; }
.entry-content .imea-dark .wp-block-button__link{
  background-color:transparent !important;
  border-color:var(--imea-paper) !important;
  color:var(--imea-paper) !important;
}
.entry-content .imea-dark .wp-block-button__link:hover{
  background-color:var(--imea-paper) !important;
  color:var(--imea-ink) !important;
}

/* --- C2 : les legendes de galerie ne doivent pas se poser sur la photo --- */
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
  position:static !important;
  background:none !important;
  background-image:none !important;
  color:var(--imea-muted) !important;
  text-shadow:none !important;
  padding:0 !important;
  margin:10px 0 0 !important;
  text-align:left !important;
  font-size:12px !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  max-height:none !important;
  overflow:visible !important;
  flex-grow:0;
}
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image{
  align-self:flex-start;
}

/* --- D4 : puces en point median terracotta --- */
.entry-content ul li{ font-size:15.5px; }
.entry-content ul li::before{
  content:'\00B7';
  left:5px; top:6px;
  width:auto; height:auto; background:none;
  color:var(--imea-accent); font-size:24px; line-height:1;
}

/* --- E3 : liens texte en terracotta souligne --- */
.entry-content p > a[href$="/"]:not(.wp-block-button__link){ }
.entry-content .more,
.entry-content p a.more{
  display:inline-block; font-size:13.5px; letter-spacing:.04em;
  color:var(--imea-accent); border-bottom:1px solid var(--imea-line);
  padding-bottom:2px; text-decoration:none;
}
.entry-content .more:hover{ border-color:var(--imea-accent); }

/* --- A5 : encadres de prix --- */
.entry-content .imea-pricebox{
  border:1px solid var(--imea-line);
  background-color:var(--imea-paper);
  padding:28px 26px;
  margin:20px 0;
}
.entry-content .imea-pricebox .kicker{ margin-bottom:2px; }
.entry-content .imea-pricebox .amount{
  font-family:var(--imea-serif); font-size:36px; line-height:1;
  display:block; margin:2px 0 8px;
}
.entry-content .imea-pricebox p{ font-size:15px; color:var(--imea-ink-soft); margin:0; max-width:none; }

/* --- A6 : etapes numerotees --- */
.entry-content .imea-steps{ counter-reset:s; }
.entry-content .imea-steps > .wp-block-column{ counter-increment:s; }
.entry-content .imea-steps > .wp-block-column::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--imea-serif); font-size:27px; color:var(--imea-accent);
  display:block; margin-bottom:10px;
}
.entry-content .imea-steps h3{ margin-top:0; font-size:18px; }

/* --- questions frequentes en accordeon --- */
.entry-content .wp-block-details{
  border-top:1px solid var(--imea-line);
  padding:20px 0;
  margin:0;
}
.entry-content .wp-block-details:last-of-type{ border-bottom:1px solid var(--imea-line); }
.entry-content .wp-block-details summary{
  font-family:var(--imea-serif);
  font-size:19px;
  line-height:1.35;
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:34px;
}
.entry-content .wp-block-details summary::-webkit-details-marker{ display:none; }
.entry-content .wp-block-details summary::after{
  content:'+';
  position:absolute; right:4px; top:-2px;
  font-family:var(--imea-sans); font-size:22px; line-height:1;
  color:var(--imea-accent);
}
.entry-content .wp-block-details[open] summary::after{ content:'\2212'; }
.entry-content .wp-block-details[open] summary{ color:var(--imea-accent); }
.entry-content .wp-block-details p{ margin-top:14px; font-size:15.5px; color:var(--imea-ink-soft); }
.entry-content .wp-block-details + .wp-block-details{ margin-top:0; }

/* l'accordeon occupe toute la largeur de sa colonne */
.entry-content .wp-block-details{ max-width:none; }

/* --- D7 : champs de formulaire habilles --- */
.ff-el-form-control{
  background-color:var(--imea-paper) !important;
  border:1px solid var(--imea-line) !important;
  border-radius:0 !important;
  padding:13px 14px !important;
  font-family:var(--imea-sans) !important;
  font-size:15.5px !important;
  color:var(--imea-ink) !important;
}
.ff-el-form-control:focus{ border-color:var(--imea-accent) !important; outline:none !important; box-shadow:none !important; }
.ff-el-input--label label{
  font-size:12px !important; letter-spacing:.11em; text-transform:uppercase;
  color:var(--imea-muted) !important; font-weight:400 !important;
}
.ff-btn-submit{ width:100%; }

/* --- D8 : note discrete --- */
.entry-content p.note{ font-size:14px; color:var(--imea-muted); margin-top:16px; }

/* --- D9 : premier paragraphe, ne grossir que .lead --- */
.entry-content > p:first-of-type{ font-size:inherit; line-height:inherit; color:inherit; }
.entry-content > p.lead,
.entry-content p.lead{ font-size:20px; line-height:1.6; color:var(--imea-ink-soft); }

/* citations, signature --- */
.entry-content .wp-block-quote cite{
  display:block; font-family:var(--imea-sans); font-style:normal;
  font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--imea-muted); margin-top:12px;
}

/* --- E5 : le menu ne doit pas deborder entre 769 et 1100 px --- */
@media (min-width:769px) and (max-width:1100px){
  .main-navigation .main-nav ul li a{ padding-left:9px; padding-right:9px; font-size:13px; }
  .main-navigation .main-nav > ul > li:last-child > a{ padding-left:16px; padding-right:16px; }
  .site-logo img, .site-header img{ max-height:56px !important; }
}

/* =========================================================
   Composants de la maquette Accueil v2.
   Le titre de page est desormais dans le contenu sur l'accueil, pour pouvoir
   le placer dans une colonne a cote de la photo : on masque celui du theme.
   ========================================================= */
body.home .entry-header{ display:none; }

.entry-content h1{
  font-family:var(--imea-serif);
  font-weight:600;
  font-size:clamp(30px,3.6vw,50px);
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 24px;
  max-width:none;
}
.entry-content .imea-hero{ margin-top:8px; margin-bottom:0; }
.entry-content .imea-hero .note{ margin-top:-6px; }
.entry-content .imea-hero .wp-block-buttons{ margin-bottom:14px; }

/* bande resserree, pour la rangee d'engagements */
.entry-content .imea-serre{ padding-top:58px; padding-bottom:58px; }

/* --- les quatre engagements, chacun sous son filet --- */
.entry-content .imea-engagements > .wp-block-column{
  border-top:1px solid var(--imea-line);
  padding-top:18px;
}
.entry-content .imea-engagements h3{
  margin:0 0 8px;
  font-size:21px;
  line-height:1.25;
}
.entry-content .imea-engagements p{
  margin:0;
  font-size:15px;
  color:var(--imea-ink-soft);
  max-width:none;
}

/* --- cartes de prestation et cartes de serie --- */
.entry-content .imea-43 img{ aspect-ratio:4/3; object-fit:cover; }
.entry-content .imea-11 img{ aspect-ratio:1/1;  object-fit:cover; }
.entry-content .imea-43,
.entry-content .imea-11{ margin:0; }

.entry-content .imea-cartes h3{ margin:22px 0 10px; font-size:24px; }
.entry-content .imea-cartes p{ font-size:16px; max-width:none; }

.entry-content .imea-prix{
  border-top:1px solid var(--imea-line);
  padding-top:12px;
  margin-top:14px;
  font-size:15px;
  color:var(--imea-ink-soft);
}
.entry-content .imea-prix .montant{
  font-family:var(--imea-serif);
  font-size:20px;
  color:var(--imea-ink);
}

.entry-content .imea-series h3{ margin:16px 0 6px; font-size:20px; line-height:1.25; }
.entry-content .imea-series h3 a{
  color:var(--imea-ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.entry-content .imea-series h3 a:hover{ border-bottom-color:var(--imea-accent); }
.entry-content .imea-meta{
  margin:0;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--imea-muted);
  max-width:none;
}

/* --- la note sur le Maroc, signalee par un filet terracotta --- */
.entry-content .imea-note-accent{
  border-left:2px solid var(--imea-accent);
  padding-left:22px;
  margin-top:36px;
  font-size:16px;
  color:var(--imea-ink-soft);
  max-width:52em;
}

/* --- citation en grand, et mention encadree --- */
.entry-content .imea-citation{
  font-family:var(--imea-serif);
  font-weight:600;
  font-size:clamp(24px,2.6vw,33px);
  line-height:1.2;
  color:var(--imea-ink);
  margin:0 0 22px;
  max-width:none;
}
.entry-content .imea-badge{
  display:inline-block;
  border:1px solid var(--imea-line);
  padding:12px 18px;
  font-size:14px;
  color:var(--imea-ink-soft);
  margin:6px 0 18px;
  max-width:none;
}

/* --- la ligne particuliers : une seule phrase, pas une section --- */
.entry-content .imea-ligne-part{ padding-top:30px; padding-bottom:30px; }
.entry-content .imea-ligne-part p{
  margin:0;
  max-width:none;
  font-size:16.5px;
  color:var(--imea-ink-soft);
}
.entry-content .imea-ligne-part .kicker{
  display:inline;
  margin:0 12px 0 0;
}

/* --- le telephone dans la bande finale --- */
.entry-content .imea-tel-cta{ margin-top:20px; }
.entry-content .imea-tel-cta a{
  color:var(--imea-paper);
  font-size:19px;
  border-bottom:1px solid #6a625a;
  padding-bottom:3px;
  text-decoration:none;
}
.entry-content .imea-tel-cta a:hover{ border-bottom-color:var(--imea-paper); }

/* le terracotta manque de contraste sur l'encre : on l'eclaircit */
.entry-content .imea-dark p.kicker{ color:#c97a5b; }

/* --- le telephone dans le menu --- */
.main-navigation .main-nav ul li.imea-tel > a{
  font-weight:500;
  color:var(--imea-ink) !important;
  letter-spacing:.02em;
}
.main-navigation .main-nav ul li.imea-tel > a:hover{ color:var(--imea-accent) !important; }

/* --- entre tablette et petit portable, quatre colonnes sont trop etroites --- */
@media (min-width:769px) and (max-width:1080px){
  .entry-content .imea-engagements,
  .entry-content .imea-series,
  .entry-content .imea-steps{ flex-wrap:wrap; }
  .entry-content .imea-engagements > .wp-block-column,
  .entry-content .imea-series > .wp-block-column,
  .entry-content .imea-steps > .wp-block-column{
    flex-basis:calc(50% - 20px) !important;
    flex-grow:0;
  }
}

/* =========================================================
   Respiration sur telephone.
   Le reglage d'origine venait du dessin pour ordinateur : gouttieres de 22 px,
   titres a 32 px, bandes de 80 px de haut. Sur un ecran de 390 px, le texte
   touche presque le bord et tout parait agrandi. On elargit les marges,
   on redescend l'echelle typographique et on resserre les hauteurs de bande.
   ========================================================= */
@media (max-width:768px){

  /* --- marges laterales : 22 px etait trop juste --- */
  .separate-containers .inside-article{ padding:24px 26px !important; }
  .entry-content{ --imea-gutter:26px; }
  .entry-content .imea-deep,
  .entry-content .imea-band,
  .entry-content .imea-dark{
    padding-left:26px;
    padding-right:26px;
  }
  .imea-footer .inside-footer-widgets{ padding:0 26px; }

  /* --- echelle typographique.
     Cible le contenu et le titre de page uniquement : des selecteurs h2 et h3
     nus ecraseraient aussi les titres du pied de page. --- */
  body{ font-size:16px; }
  .entry-title,
  .entry-content h1{ font-size:27px !important; line-height:1.14; }
  .entry-content h2{ font-size:22px !important; line-height:1.22; margin-top:36px; }
  .entry-content h3{ font-size:18px !important; }
  .entry-content .imea-citation{ font-size:21px !important; }
  .entry-content .imea-serre{ padding-top:40px; padding-bottom:40px; }
  .entry-content .imea-ligne-part{ padding-top:24px; padding-bottom:24px; }
  .entry-content .imea-ligne-part .kicker{ display:block; margin-bottom:8px; }
  .entry-content .imea-cartes h3{ margin-top:16px; }
  .entry-content .imea-note-accent{ padding-left:16px; margin-top:26px; }
  .entry-content .imea-badge{ padding:10px 14px; font-size:13px; }
  .entry-content p.lead,
  .entry-content > p.lead{ font-size:17.5px; line-height:1.58; }
  .entry-content p.kicker{ font-size:10.5px; letter-spacing:.17em; margin-bottom:12px; }
  .entry-content .wp-block-quote p{ font-size:19px; }
  .entry-content .wp-block-details summary{ font-size:17px; }

  /* --- hauteur des bandes : 80 px de haut et de bas etirait la page --- */
  .entry-content .imea-deep,
  .entry-content .imea-band{ padding-top:50px; padding-bottom:50px; }
  .entry-content .imea-dark{ padding-top:52px; padding-bottom:52px; }

  /* --- colonnes empilees : elles se touchaient, faute de gouttiere --- */
  .entry-content .wp-block-columns{ row-gap:28px; column-gap:0; }
  .entry-content .wp-block-column{ flex-basis:100% !important; }

  /* --- images et galeries --- */
  .entry-content figure.wp-block-image{ margin:26px 0; }
  .entry-content .wp-block-gallery.has-nested-images{ gap:12px; }
  .entry-content .wp-block-gallery figcaption{ font-size:11px !important; }

  /* --- encadres de prix et etapes --- */
  .entry-content .imea-pricebox{ padding:22px 20px; margin:16px 0; }
  .entry-content .imea-pricebox .amount{ font-size:30px; }
  .entry-content .imea-steps > .wp-block-column::before{ font-size:23px; margin-bottom:6px; }

  /* --- boutons : pleine largeur, plus faciles a viser au pouce --- */
  .entry-content .wp-block-buttons{ gap:10px; }
  .entry-content .wp-block-button{ width:100%; }
  .entry-content .wp-block-button__link{ display:block; text-align:center; padding:15px 20px; }
}

/* ecrans tres etroits : on ne descend pas sous 20 px de marge */
@media (max-width:400px){
  .separate-containers .inside-article{ padding:20px 20px !important; }
  .entry-content .imea-deep,
  .entry-content .imea-band,
  .entry-content .imea-dark{ padding-left:20px; padding-right:20px; }
  .imea-footer .inside-footer-widgets{ padding:0 20px; }
  .entry-title{ font-size:25px !important; }
}

/* --- pied de page --- */
.imea-footer{
  background-color:var(--imea-ink);
  color:#c8bfb5;
  padding:64px 0 52px;
}
.imea-footer .inside-footer-widgets{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  max-width:1280px;
  margin:0 auto;
  padding:0 56px;
}
.imea-footer .widget{ padding:0; margin:0; background:none; }
.imea-footer .widget-title,
.imea-footer h2,
.imea-footer h3{
  font-family:var(--imea-sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--imea-paper);
  margin:0 0 16px;
}
.imea-footer p,
.imea-footer li{
  font-size:14.5px;
  line-height:1.7;
  color:#c8bfb5;
  margin:0 0 8px;
  max-width:none;
}
.imea-footer ul{ list-style:none; margin:0; padding:0; }
.imea-footer li{ padding:0; }
.imea-footer li::before{ content:none; }
.imea-footer a{ color:#c8bfb5; text-decoration:none; border-bottom:1px solid transparent; }
.imea-footer a:hover{ color:var(--imea-paper); border-bottom-color:var(--imea-accent); }
.imea-footer img{ max-width:132px; height:auto; margin-bottom:16px; }
.imea-footer .imea-claim{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--imea-accent); margin-top:18px; margin-bottom:4px;
}
.site-info{
  background-color:var(--imea-ink);
  color:#8b8177;
  font-size:13px;
  border-top:1px solid rgba(250,247,242,.12);
}
.site-info a{ color:#8b8177; }
.site-info .copyright-bar a[href*="generatepress"]{ display:none; }
@media (max-width:900px){
  .imea-footer .inside-footer-widgets{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:768px){
  .imea-footer{ padding:44px 0 34px; }
  .imea-footer .inside-footer-widgets{ grid-template-columns:1fr; padding:0 22px; gap:28px; }
}