/* CSS structurel extrait des blocs <style> embarqués dans header.php. */
/* Generated by openspec change extraire-css-header-vers-fichier; see that change's tasks.md. */

@media screen and (max-device-width: 1024px) {
  .diyw a.switchViewWeb {
    display: inline !important;
  }
}

@media screen and (min-device-width: 1024px) {
  .mediumScreenDisabled {
    display: block;
  }
  .smallScreenDisabled {
    display: block;
  }
}
@media screen and (max-device-width: 1024px) {
  .mediumScreenDisabled {
    display: none;
  }
}
@media screen and (max-device-width: 568px) {
  .smallScreenDisabled {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .mobilepreview .mediumScreenDisabled {
    display: block;
  }
  .mobilepreview .smallScreenDisabled {
    display: block;
  }
}
@media screen and (max-width: 1024px) {
  .mobilepreview .mediumScreenDisabled {
    display: none;
  }
}
@media screen and (max-width: 568px) {
  .mobilepreview .smallScreenDisabled {
    display: none;
  }
}

.diyw div#emotion-header {
  max-width: 940px;
  max-height: 268px;
  background: #a0a0a0;
}

.diyw div#emotion-header-title-bg {
  left: 0%;
  top: 20%;
  width: 100%;
  height: 14%;

  background-color: #ffffff;
  opacity: 0.5;
  filter: alpha(opacity = 50);
  display: none;
}
.diyw img#emotion-header-logo {
  left: 29.93%;
  top: 0%;
  background: transparent;
  width: 39.47%;
  height: 100%;
}

.diyw div#emotion-header strong#emotion-header-title {
  left: 12%;
  top: 20%;
  color: #000000;
  font:
    normal normal 24px/120% Helvetica,
    "Helvetica Neue",
    "Trebuchet MS",
    sans-serif;
}

.diyw svg#emotion-header-title-svg text {
  font-family:
    Helvetica,
    "Helvetica Neue",
    "Trebuchet MS",
    sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: normal;
  fill: #000000;
  line-height: 1.2em;
}

.diyw svg#emotion-header-title-svg tspan {
  text-anchor: start;
}

.diyw div#emotion-no-bg-container {
  max-height: 268px;
}

.diyw div#emotion-no-bg-container .emotion-no-bg-height {
  margin-top: 28.51%;
}

/*
Ajouté par le change page-options-acf (pas issu d'une extraction du site
statique) : la colonne horaires de la sidebar (td.w-108px, ~108px) est trop
étroite pour "09:00 - 12:00 14:00 - 18:00" sur une ligne ; sans cette règle,
le navigateur retourne à la ligne n'importe où (ex. entre "14:00" et
"- 18:00"). .creneau force chaque plage horaire à rester sur une seule
ligne, pour que le retour à la ligne ne puisse se produire qu'entre deux
plages horaires.
*/
.creneau {
  white-space: nowrap;
}

/*
Every h1 in the main content column computes to margin:0 -- some
higher-specificity rule overrides the vendored ".diyw h1{margin:0.67em 0}"
(style.css) back to zero, not tracked down exactly. A page's own title h1
(page.php, no class) is often followed immediately by a content h1 (the
page content's first heading block, class="wp-block-heading"), so with no
margin the two stack directly against each other, unreadable. Needs at
least two classes plus the element to outweigh whatever's zeroing it out;
a bare "h1" rule (or even one class) is silently ignored, verified live.
*/
.diywebMain .diywebGutter h1 {
  margin-top: 24px;
  margin-bottom: 16px;
}

/*
Same margin:0 problem as h1 above, but for every other heading level plus
images -- confirmed via getComputedStyle on mentions-legales (h1-h3) and
nos-produits-phares-hygiene-et-beaute-maquillage-couleur-caramel (h1-h5,
images): h2 through h5 and figure.wp-block-image all computed margin:0,
so anything butts directly against the block before/after it. Margins
step down with depth, echoing h1's own 24px/16px above.

h4/h5 also had a broken size scale: body text (p) is 14px, but h4 computed
to exactly 14px (indistinguishable from body except bold) and h5 to
11.62px -- *smaller* than the text it's supposed to head. Only
maquillage-couleur-caramel uses h4/h5 today (introduced by the
cascade-heading-levels-after-h1-fix change), but the rule needs to hold
for any future page that does. Floors both at or above 14px.
*/
.diywebMain .diywebGutter h2 {
  margin-top: 20px;
  margin-bottom: 12px;
}

.diywebMain .diywebGutter h3 {
  margin-top: 16px;
  margin-bottom: 10px;
}

.diywebMain .diywebGutter h4 {
  margin-top: 14px;
  margin-bottom: 8px;
  font-size: 15px;
}

.diywebMain .diywebGutter h5 {
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 14px;
}

.diywebMain .diywebGutter figure.wp-block-image {
  margin-top: 20px;
  margin-bottom: 20px;
}

/*
Same margin:0 problem as h1-h5/images above, but for paragraphs -- on
text-dense pages (e.g. nos-produits-phares-les-semences-kokopelli, 21
consecutive <p>) every paragraph butts directly against the next, including
ones that open with a bold lead-in acting as a mini sub-heading (e.g.
"Variété et diversité:"), indistinguishable from the wall of text around it.
Bottom margin only (no top): a paragraph doesn't need to separate itself
from what precedes it the way a heading does (heading margins already
handle that side via collapse), just from what follows.
*/
.diywebMain .diywebGutter p {
  margin-bottom: 12px;
}

/*
Unlike h1-h5/images/p above, ul isn't at margin:0 -- no rule here overrides
it, so it keeps the UA default of 7px. Bullets already delimit individual
li's from each other (no li margin needed, verified live on both flat lists
and lists with rich li content like a heading+paragraph, e.g.
maquillage-couleur-caramel: the paragraph's own 12px margin-bottom already
carries that spacing). The list *as a block* transitioning to/from
surrounding text is the only gap: 7px reads as smaller than the 12px
rhythm now established for paragraphs on every other transition.
*/
.diywebMain .diywebGutter ul {
  margin: 12px 0;
}

/*
Vendored style.css floats each #mainNav1 li (".diyw #mainNav1 li{float:left}"),
with no regard for the ~920px available width of the boxed site column --
constant above the tablet breakpoint, regardless of viewport width. With 8
menu items the float layout needs ~990px, so the last item always wraps to
a second line. display:flex on the container neutralizes that float per the
CSS spec (float has no effect on a flex item) without needing a specificity
fight, and the default flex-shrink:1 lets long labels wrap their own text
onto a second line *inside* their own <a> instead -- #mainNav1 a's
padding/margin (vendored, "45px 15px 10px 15px") stays untouched. #mainNav1
is already hidden below 768px by the vendored mobile nav CSS
("#mainNav1{display:none !important}"), so this is scoped the same way for
clarity even though mobile can't reach it regardless.
*/
@media (min-width: 768px) {
  #mainNav1 {
    display: flex;
    flex-wrap: nowrap;
    max-width: 960px;

  }

  /*
  The nav row's green background lives on .diyfeGE.diyfeCA.diyfeCA2, a div
  boxed inside the same ~920px centered column as the rest of the site, so
  the orange page background shows on both sides of the menu. .diywebNavMain
  (its ancestor) already spans the full viewport width -- painting the same
  green there bleeds the color edge-to-edge while the nav items themselves
  stay exactly where they were (still centered in the boxed column, still
  sized by #mainNav1's own flex layout above). Matches the footer's existing
  full-bleed-band/centered-content pattern instead of introducing a new one.
  */
  .diywebNavMain {
    background-color: rgb(159, 221, 152);
  }

  /*
  Vendored style.css puts a "border-right:1px solid #918A46" on every
  #mainNav1 a as an inter-item separator, but never a matching border on the
  left of the first item -- harmless before, but now that the green
  background bleeds full-width, the first item's edge looks bare compared to
  the others. Mirrors the vendored separator on just #mainNav1's first <li>.
  */
  #mainNav1 > li:first-child > a {
    border-left: 1px solid #918a46;
  }

  /*
  Vendored ".diywebMainGutter{padding:0 20px}" boxes main content to 920px
  (960px .diywebLiveArea minus 40px) -- narrower than the site's own 960px
  boxed max-width used elsewhere (.diywebLiveArea itself, and now #mainNav1
  above). Dropping the padding entirely brings content up to the full
  960px, consistent with nav rather than chasing #emotion-header's
  independent fixed 940px (tied to its 940x268 source images and the
  percentage math in emotion-header-position.js -- deliberately left
  untouched, see that rule above). .diywebMain/.diywebSecondary are already
  percentage-sized inside .diyfeGridGroup, so they follow automatically.

  Scoped to .diywebContent only -- NOT a bare ".diywebMainGutter" override.
  The carousel's own .diywebMainGutter carries "diywebPull" (a vendored
  "margin:0 -20px" that exactly cancels its own 20px padding to bleed its
  background full-width); a padding change reaching that rule would throw
  the cancellation off and shift the carousel sideways (verified live
  before writing this rule). The footer has its own separate gutter
  layering and narrower content column (880px) that predates this change
  and isn't part of it.
  */
  .diywebContent .diywebMainGutter {
    padding: 0;
  }

  /*
  Nav went boxed-to-940px like content/carousel at first, but that left the
  now-full-bleed green background (see .diywebNavMain background-color
  above) bare on both sides with no button in it. Dropping this gutter's
  padding -- the same fix applied to .diywebContent above -- brings nav up
  to the same 960px .diywebLiveArea width as content, at every breakpoint
  (not just above the ~1133px fluid/960 threshold): an earlier attempt
  additionally overrode .diywebNavMain .diywebLiveArea itself to bypass its
  width entirely, which desynced nav (100% of viewport) from content (still
  on the fluid .diywebLiveArea system) below that threshold -- e.g. both
  measured 720px at a 768px viewport once fixed, vs. 768px/720px mismatched
  before. #mainNav1's own max-width:960px above is a harmless redundant cap
  once this fluid system is back in play.
  */
  .diywebNavMain .diywebMainGutter {
    padding: 0;
  }

  /*
  li's own height/padding/centering for #mainNav1 a is now set directly in
  theming.css (".diyw #mainNav1 a": height:100px, padding:0, display:flex,
  align-items:center, width:100% -- higher specificity than any bare
  "#mainNav1 a" rule here would have, since theming.css's selector adds
  the .diyw class; a same-specificity rule here would still lose to
  vendored CDN CSS the same way, see the h1 rule's comment above for the
  general pattern). This rule only still needs flex/float on li itself, to
  keep every li's own width equal (flex:1 1 0) within #mainNav1's row --
  unrelated to the fixed-height/centering fix above, which lives entirely
  in <a> now that <a> has an explicit height instead of depending on li to
  stretch it.
  */
  .diyw #mainNav1 li {
    display: flex;
    flex: 1 1 0;
    float: none;
  }

  /*
  .diyfeGridGroup (sidebar + main content) touched the carousel's bottom
  edge directly, margin-top:0 -- an abrupt transition with no breathing
  room before the content starts. 30px is deliberately smaller than
  .diywebFooter's own margin-top:48px (footer.css): that one marks the end
  of a page's content into a color band, this one marks the start of it,
  a quieter transition.
  */
  .diyfeGridGroup {
    margin-top: 30px;
  }
}